{"id":24197,"date":"2020-07-30T17:29:38","date_gmt":"2020-07-30T23:29:38","guid":{"rendered":"https:\/\/goldenti.com\/site\/?p=24197"},"modified":"2020-07-30T17:29:40","modified_gmt":"2020-07-30T23:29:40","slug":"angular-mucho-mas-que-un-framework","status":"publish","type":"post","link":"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/","title":{"rendered":"Angular: Mucho m\u00e1s que un framework"},"content":{"rendered":"\n<p>Dicen que el imperio romano no se hizo de la noche a la ma\u00f1ana\u2026 Y te podemos confirmar que este fabuloso framework tampoco.<\/p>\n\n\n\n<p>Antes que nada, hagamos una aclaraci\u00f3n para evitar confusiones \u2026 AngularJS y Angular no son lo mismo. AngularJS es un framework para desarrollo web construido por Google e inicialmente liberado en 2010. Angular (a secas) tambi\u00e9n es un framework para desarrollo web, y tambi\u00e9n construido por Google (y de hecho por varios de las mismas personas que hicieron AngularJS). Lo que hoy se conoce como \u201cAngular\u201d fue inicialmente llamado \u201cAngular 2\u201d ya que era visto como la siguiente versi\u00f3n de Angular 1.x (lo que hoy es llamado AngularJS). Sin embargo, dado que no son retrocompatibles, y que Angular 2 tiene un alcance m\u00e1s amplio, se decidi\u00f3 mantener la rama 1.x de Angular bajo el nombre AngularJS mientras que la rama nueva se qued\u00f3 simplemente como Angular.<\/p>\n\n\n\n<p>La versi\u00f3n inicial de esta nueva encarnaci\u00f3n de Angular fue liberada en septiembre del 2016 y cada 6 meses se libera una versi\u00f3n mayor nueva bajo un esquema de versionado sem\u00e1ntico (ej. 1.2.3-beta.1 se refiere a 1=versi\u00f3n mayor posiblemente con breaking changes, 2= cambios menores, 3 fixes, meta.1 pre-release). Al escribir este art\u00edculo, la versi\u00f3n estable m\u00e1s reciente es la 5.2.3 y la pr\u00f3xima versi\u00f3n ya se encuentra en 6.0.0-beta2.<\/p>\n\n\n\n<p>La programaci\u00f3n en Angular se hace usando TypeScript, un lenguaje que es un superconjunto de JavaScript que agrega capacidades de tipado est\u00e1tico. Esto nos da la ventaja de poder tipar cosas como variables, funciones, devoluciones, adem\u00e1s de poder crear Interfaces. TypeScript tambi\u00e9n nos da la capacidad de usar enumerators, modules, namespaces, decorators y generics. Y por \u00faltimo pero no por ello menos importante est\u00e1 sistema de import, que vamos a utilizar a diario para atomizar y modularizar todo nuestro c\u00f3digo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Arquitectura<\/h3>\n\n\n\n<p>Una de las grandes diferencias entre un framework y una biblioteca, es que el framework es un mont\u00f3n de funcionalidades \u201cgen\u00e9ricas\u201d preparadas para que nosotros hagamos funcionalidad espec\u00edfica. En cambio, una biblioteca es una \u00fanica funci\u00f3n gen\u00e9rica. Basados en esta definici\u00f3n podemos decir que un framework consiste de varias bibliotecas escritas para manejarse todas juntas. Bajo este pensamiento, podemos decir que Angular prepar\u00f3 todo para que nuestra aplicaci\u00f3n solo utilice los m\u00f3dulos (o bibliotecas) que vamos a necesitar en nuestra WebApp.<\/p>\n\n\n\n<p>Con este pensamiento, cuando iniciamos a construir nuestra aplicaci\u00f3n con Angular, solo vamos a tener el m\u00f3dulo principal llamado \u201ccore\u201d, con \u00e9l vamos a poder ejecutar nuestra aplicaci\u00f3n y escribir cada uno de nuestros componentes. Si nuestra aplicaci\u00f3n necesita generar rutas tenemos que agregar el m\u00f3dulo de ruteo, que Angular ya nos provee, y si necesitaramos agregar formularios, Angular tambi\u00e9n tiene un m\u00f3dulo incre\u00edble para eso. A estas alturas podr\u00e1s estarte preguntando cu\u00e1ntos m\u00f3dulos\/bibliotecas tiene Angular internamente, y la verdad es que son muchas pero la mayor\u00eda son independientes entre s\u00ed por lo que nuestra webapp solo necesita importar los m\u00f3dulos necesarios para poder trabajar.<\/p>\n\n\n\n<p>Para construir aplicaciones Angular creamos:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>templates HTML que contienen etiquetas especiales de Angular,<\/li><li>componentes de clase que gestionan dichos templates,<\/li><li>servicios que encapsulan l\u00f3gica de la aplicaci\u00f3n,<\/li><li>y m\u00f3dulos que organizan los componentes y servicios.<\/li><\/ul>\n\n\n\n<p>Iniciamos la aplicaci\u00f3n en el m\u00f3dulo \u201croot\u201d, y Angular asume el control, presentando el contenido de la aplicaci\u00f3n en el navegador y respondiendo a las interacciones del usuario de acuerdo con las instrucciones que hemos proporcionado [2].<\/p>\n\n\n\n<p>Los componentes son los elementos que definen la informaci\u00f3n o contenido que queremos mostrar en un pedazo de una pantalla. En los componentes tambi\u00e9n se define c\u00f3mo se debe responder a distintos eventos. El listado 1 muestra el ejemplo de un componente. Como podemos ver, es una clase TypeScript que define propiedades y operaciones. Usa la declaraci\u00f3n @Component para definir metadatos que Angular utiliza.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><tbody><tr><td>import { Component, OnInit, OnDestroy } from &#8216;@angular\/core&#8217;;<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><tr><td><\/td><td>@Component({<\/td><\/tr><tr><td><\/td><td>selector: &#8216;app-root&#8217;,<\/td><\/tr><tr><td><\/td><td>templateUrl: &#8216;.\/app.component.html&#8217;,<\/td><\/tr><tr><td><\/td><td>styleUrls: [&#8216;.\/app.component.css&#8217;]<\/td><\/tr><tr><td><\/td><td>})<\/td><\/tr><tr><td><\/td><td>export class AppComponent implements OnInit, OnDestroy {<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><tr><td><\/td><td>title = &#8216;app works!&#8217;;<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><tr><td><\/td><td>constructor() {<\/td><\/tr><tr><td><\/td><td>console.log(&#8216;soy un constructor&#8217;);<\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><tr><td><\/td><td>ngOnInit() {<\/td><\/tr><tr><td><\/td><td>console.log(&#8216;esto se ejecuta en el momento que arranca a dibujarse el componente&#8217;);<\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><tr><td><\/td><td>ngOnDestroy() {<\/td><\/tr><tr><td><\/td><td>console.log(&#8216;esto se ejecuta en el momento antes de que se destruya el componente y se cargue otro&#8217;);<\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><tr><td><\/td><td><\/td><\/tr><tr><td><\/td><td>}<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><em>Listado 1. Componente<\/em><\/p>\n\n\n\n<p>Las plantillas (templates) que definen c\u00f3mo se despliegan los componentes en una vista. El listado 2 muestra el c\u00f3digo de una plantilla que define c\u00f3mo desplegar una lista de componentes \u201ch\u00e9roe\u201d. Como podemos ver, las plantillas contienen c\u00f3digo HTML tradicional adem\u00e1s de etiquetas y atributos especiales para hacer el&nbsp;<em>binding<\/em>&nbsp;con los componentes y eventos.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/knrBmNibxVReZ7hSBNPVmgc5CAJmWPYoKSdbj8movRMU0ZotbVnojwWzuTIM5jEwwdHomnUBfIjyJ7V0RY-AUVBAN4eSxjNEOVbYuGKCWD1OVzJNLkQCWfbcW-Cm5XcctRgxOdj-\" alt=\"\"\/><\/figure>\n\n\n\n<p><em>Listado 2. Plantilla<\/em><\/p>\n\n\n\n<p>Los atributos especiales que usamos en las plantillas para poder transformar el DOM de nuestra vista de manera din\u00e1mica, se definen por medio de directivas (<em>directives<\/em>). Angular ya incluye algunas directivas base \u2014por ejemplo, en el listado vemos ngIf y ngFor\u2014 pero t\u00fa tambi\u00e9n puedes implementar tus propias directivas, o importar directivas creadas por la comunidad.<\/p>\n\n\n\n<p>Los servicios con clases que tienen un prop\u00f3sito espec\u00edfico y bien definido que se presta a ser encapsulado para ser reutilizado por distintos componentes en nuestra aplicaci\u00f3n. Por ejemplo, podemos crear un servicio para escribir a la bit\u00e1cora, o para realizar c\u00e1lculos comunes (ej. calcular impuestos).<\/p>\n\n\n\n<p>El \u201cinyector\u201d es un mecanismo que se encarga de proveer a los componentes con instancias de los servicios que necesitan. Los servicios se manejan como \u201csingleton\u201d, &nbsp;es decir que a lo m\u00e1s existe una instancia de cada servicio y dicha instancia es provista a los distintos componentes que ocupan el servicio.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tecnolog\u00edas complementarias<\/h3>\n\n\n\n<p>Ya tenemos un vistazo general de lo que es Angular. Ahora vamos a conocer un poco m\u00e1s sobre las tecnolog\u00edas y herramientas que lo habilitan, as\u00ed como bibliotecas y frameworks sat\u00e9lites.<\/p>\n\n\n\n<p>La gran mayor\u00eda de los m\u00f3dulos de Angular utilizan una biblioteca muy potente llamada RxJS [3]. Esta es una biblioteca para programaci\u00f3n reactiva basada en el patr\u00f3n de \u201cobservador\u201d [4]. Angular se apoya en RxJS para habilitar la reacci\u00f3n a eventos de forma as\u00edncrona y con alto desempe\u00f1o. Por ejemplo, el m\u00f3dulo de Routing de Angular est\u00e1 escrito con RxJS y gracias a ello puede \u201creaccionar\u201d a distintos cambios sin tener que \u201credibujar\u201d el componente o la vista completa. Asimismo, el m\u00f3dulo HTTP tambi\u00e9n usa RxJS, y nos permite conectarnos con nuestras APIs y formatear la devoluci\u00f3n e incluso poder esperar todos los valores futuros que queremos.<\/p>\n\n\n\n<p>Otra herramienta clave al desarrollar con Angular es su CLI (command line interface). Esta es una herramienta de l\u00ednea de comando que facilita la creaci\u00f3n de aplicaciones &nbsp;creando la estructura base (scaffolding) con archivos necesarios y esqueleto de c\u00f3digo, organizandolos en una estructura de directorios estandarizada y agregando las bibliotecas y dependencias requeridas. El CLI tambi\u00e9n soporta comandos para ejecutar pruebas y correr la aplicaci\u00f3n, entre otros.<\/p>\n\n\n\n<p>El CLI se instala como una biblioteca de npm (@angular\/cli) y se invoca por medio del comando \u201cng\u201d. Es as\u00ed que si queremos instalar el CLI y crear una aplicaci\u00f3n Angular tipo \u201chola mundo\u201d con la estructura de archivos y directorios default, lo \u00fanico que tendr\u00edamos que hacer es:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$ npm install -g @angular\/cli\n$ ng new hola-mundo\n$ cd hola-mundo\n$ ng serve<\/pre>\n\n\n\n<p>y al dirigir nuestro navegador a localhost:4200 veremos nuestra aplicaci\u00f3n corriendo, tal como en la figura 2.<\/p>\n\n\n\n<p><img fetchpriority=\"high\" decoding=\"async\" alt=\"\" height=\"383\" src=\"https:\/\/lh3.googleusercontent.com\/znXSPRYV-fv5svIytFwwp99LopetJ_GjnaIAztvmrBuoXszGQWdrGwa40umzrXYRnRUflwE97nACJdXrnmQPz1fnf9wXGDNy_psGZmQQmFObYPtH3PMTzrI22qQcYd7rY9fs02-v\" width=\"337\"\/>?<\/p>\n\n\n\n<p><em>Figura 2. Aplicaci\u00f3n default generada por el CLI<\/em><\/p>\n\n\n\n<p>El CLI tambi\u00e9n soporta el uso de schematics, que son funcionalidades personalizadas que podemos realizar por medio del CLI para satisfacer nuestro workflow espec\u00edfico [5].<\/p>\n\n\n\n<p>Angular es bastante amigable con otros frameworks, y de hecho es com\u00fanmente usado en frameworks como Ionic [6] y NativeScript [7] que permiten construir aplicaciones m\u00f3viles para iOS y Android a partir de una misma base de c\u00f3digo.<\/p>\n\n\n\n<p>Imagino que a estas alturas ya habr\u00e1s escuchado hablar sobre Progressive Web Apps, que b\u00e1sicamente son aplicaciones web que tienen comportamiento similar al de aplicaciones nativas. La buena noticia es que Angular tambi\u00e9n tiene amplio soporte para el desarrollo de Progressive Web Apps.<\/p>\n\n\n\n<p>Otra tecnolog\u00eda web que est\u00e1 cobrando gran inter\u00e9s son los web components, que b\u00e1sicamente son componentes web reutilizables independientemente del framework con que hayan sido creados. El equipo de Angular ya tiene en curso una iniciativa llamada Angular Elements para dar soporte a custom elements desde Angular. Esto entre otras cosas permitir\u00e1 que en Angular puedas usar componentes de otros frameworks como React o Vue, y viceversa. De hecho, los elements son vistos como un camino posible para migrar poco a poco aplicaciones AngularJS hacia Angular. Angular 6, que actualmente se encuentra en beta, ya incluye una versi\u00f3n preliminar de Angular Elements.<\/p>\n\n\n\n<p>Uno de los grandes problemas de AngularJS fue el SEO, debido a que el contenido de la app se despliega solamente en el navegador, pero en el lado del servidor no se genera contenido que sea indexable por los motores de b\u00fasqueda. Afortunadamente, ya existe Angular Universal que facilita el Server Side Render (SSR) para que el contenido de nuestra app tambi\u00e9n est\u00e9 disponible desde el servidor y los robots puedan recorrerlo sin problema.<\/p>\n\n\n\n<p>S\u00e9 que con todo lo que has le\u00eddo aqu\u00ed te urge salir corriendo a instalar el Angular CLI, pero te pido que esperes por favor ya que todav\u00eda tengo algunas cosas m\u00e1s que contarte.<\/p>\n\n\n\n<p>Otro aspecto muy importante de Angular es su comunidad. Aunque para algunos sea dif\u00edcil de creer, la comunidad dentro de un framework es super importante, ya que son quienes van a hacer que el producto crezca, mejore, adem\u00e1s de que existan suficientes gu\u00edas y ejemplos. Varias bibliotecas importantes como Angular Universal, Videogular o NGRX solo por mencionar algunas, han sido creadas por personas de la comunidad que decidieron ayudar al equipo de Angular. Lo interesante de esto es que nunca vas a estar solo, y que somos muchos detr\u00e1s de este framework para poder dar una mano en lo que necesiten.<\/p>\n\n\n\n<p>Muchas veces escucho excusas de que javascript es muy distinto a lenguajes tipados y fuertemente orientados a objetos, ahora con todo esto que estuviste leyendo, \u00bfno te vas animar a probar Angular?<\/p>\n\n\n\n<p><strong>Referencias<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><a href=\"http:\/\/angular.io\/\">http:\/\/angular.io<\/a><\/li><li><a href=\"https:\/\/angular.io\/guide\/architecture\">https:\/\/angular.io\/guide\/architecture<\/a><\/li><li><a href=\"http:\/\/reactivex.io\/rxjs\/\">http:\/\/reactivex.io\/rxjs\/<\/a><\/li><li><a href=\"https:\/\/sourcemaking.com\/design_patterns\/observer\">https:\/\/sourcemaking.com\/design_patterns\/observer<\/a><\/li><li><a href=\"https:\/\/blog.angular.io\/schematics-an-introduction-dc1dfbc2a2b2\">https:\/\/blog.angular.io\/schematics-an-introduction-dc1dfbc2a2b2<\/a><\/li><li><a href=\"https:\/\/ionicframework.com\/framework\">https:\/\/ionicframework.com\/framework<\/a><\/li><li><a href=\"https:\/\/www.nativescript.org\/\">https:\/\/www.nativescript.or<\/a><\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Dicen que el imperio romano no se hizo de la noche a la ma\u00f1ana\u2026 Y te [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":24199,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-24197","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categoria"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular: Mucho m\u00e1s que un framework -<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular: Mucho m\u00e1s que un framework -\" \/>\n<meta property=\"og:description\" content=\"Dicen que el imperio romano no se hizo de la noche a la ma\u00f1ana\u2026 Y te [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-30T23:29:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-30T23:29:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/goldenti.com\/site\/wp-content\/uploads\/2020\/07\/pasted-image-0.png\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"356\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Enrique San Vicente\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Enrique San Vicente\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/\"},\"author\":{\"name\":\"Enrique San Vicente\",\"@id\":\"https:\/\/goldenti.com\/site\/#\/schema\/person\/749bb2f32a11bb70e79d84325acc2c1a\"},\"headline\":\"Angular: Mucho m\u00e1s que un framework\",\"datePublished\":\"2020-07-30T23:29:38+00:00\",\"dateModified\":\"2020-07-30T23:29:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/\"},\"wordCount\":1771,\"image\":{\"@id\":\"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/goldenti.com\/site\/wp-content\/uploads\/2020\/07\/pasted-image-0.png\",\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/\",\"url\":\"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/\",\"name\":\"Angular: Mucho m\u00e1s que un framework -\",\"isPartOf\":{\"@id\":\"https:\/\/goldenti.com\/site\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/goldenti.com\/site\/wp-content\/uploads\/2020\/07\/pasted-image-0.png\",\"datePublished\":\"2020-07-30T23:29:38+00:00\",\"dateModified\":\"2020-07-30T23:29:40+00:00\",\"author\":{\"@id\":\"https:\/\/goldenti.com\/site\/#\/schema\/person\/749bb2f32a11bb70e79d84325acc2c1a\"},\"breadcrumb\":{\"@id\":\"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/#primaryimage\",\"url\":\"https:\/\/goldenti.com\/site\/wp-content\/uploads\/2020\/07\/pasted-image-0.png\",\"contentUrl\":\"https:\/\/goldenti.com\/site\/wp-content\/uploads\/2020\/07\/pasted-image-0.png\",\"width\":700,\"height\":356},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/goldenti.com\/site\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular: Mucho m\u00e1s que un framework\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/goldenti.com\/site\/#website\",\"url\":\"https:\/\/goldenti.com\/site\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/goldenti.com\/site\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/goldenti.com\/site\/#\/schema\/person\/749bb2f32a11bb70e79d84325acc2c1a\",\"name\":\"Enrique San Vicente\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/goldenti.com\/site\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e209f1cd39d3af8ad46156c58199ffe090a7c6c7ac325b48a29eb2ad8376a2cc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e209f1cd39d3af8ad46156c58199ffe090a7c6c7ac325b48a29eb2ad8376a2cc?s=96&d=mm&r=g\",\"caption\":\"Enrique San Vicente\"},\"url\":\"https:\/\/goldenti.com\/site\/author\/enrique\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular: Mucho m\u00e1s que un framework -","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/","og_locale":"es_ES","og_type":"article","og_title":"Angular: Mucho m\u00e1s que un framework -","og_description":"Dicen que el imperio romano no se hizo de la noche a la ma\u00f1ana\u2026 Y te [&hellip;]","og_url":"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/","article_published_time":"2020-07-30T23:29:38+00:00","article_modified_time":"2020-07-30T23:29:40+00:00","og_image":[{"width":700,"height":356,"url":"https:\/\/goldenti.com\/site\/wp-content\/uploads\/2020\/07\/pasted-image-0.png","type":"image\/png"}],"author":"Enrique San Vicente","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Enrique San Vicente","Tiempo de lectura":"9 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/#article","isPartOf":{"@id":"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/"},"author":{"name":"Enrique San Vicente","@id":"https:\/\/goldenti.com\/site\/#\/schema\/person\/749bb2f32a11bb70e79d84325acc2c1a"},"headline":"Angular: Mucho m\u00e1s que un framework","datePublished":"2020-07-30T23:29:38+00:00","dateModified":"2020-07-30T23:29:40+00:00","mainEntityOfPage":{"@id":"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/"},"wordCount":1771,"image":{"@id":"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/goldenti.com\/site\/wp-content\/uploads\/2020\/07\/pasted-image-0.png","inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/","url":"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/","name":"Angular: Mucho m\u00e1s que un framework -","isPartOf":{"@id":"https:\/\/goldenti.com\/site\/#website"},"primaryImageOfPage":{"@id":"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/#primaryimage"},"image":{"@id":"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/goldenti.com\/site\/wp-content\/uploads\/2020\/07\/pasted-image-0.png","datePublished":"2020-07-30T23:29:38+00:00","dateModified":"2020-07-30T23:29:40+00:00","author":{"@id":"https:\/\/goldenti.com\/site\/#\/schema\/person\/749bb2f32a11bb70e79d84325acc2c1a"},"breadcrumb":{"@id":"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/#primaryimage","url":"https:\/\/goldenti.com\/site\/wp-content\/uploads\/2020\/07\/pasted-image-0.png","contentUrl":"https:\/\/goldenti.com\/site\/wp-content\/uploads\/2020\/07\/pasted-image-0.png","width":700,"height":356},{"@type":"BreadcrumbList","@id":"https:\/\/goldenti.com\/site\/angular-mucho-mas-que-un-framework\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/goldenti.com\/site\/"},{"@type":"ListItem","position":2,"name":"Angular: Mucho m\u00e1s que un framework"}]},{"@type":"WebSite","@id":"https:\/\/goldenti.com\/site\/#website","url":"https:\/\/goldenti.com\/site\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/goldenti.com\/site\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/goldenti.com\/site\/#\/schema\/person\/749bb2f32a11bb70e79d84325acc2c1a","name":"Enrique San Vicente","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/goldenti.com\/site\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e209f1cd39d3af8ad46156c58199ffe090a7c6c7ac325b48a29eb2ad8376a2cc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e209f1cd39d3af8ad46156c58199ffe090a7c6c7ac325b48a29eb2ad8376a2cc?s=96&d=mm&r=g","caption":"Enrique San Vicente"},"url":"https:\/\/goldenti.com\/site\/author\/enrique\/"}]}},"_links":{"self":[{"href":"https:\/\/goldenti.com\/site\/wp-json\/wp\/v2\/posts\/24197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/goldenti.com\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/goldenti.com\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/goldenti.com\/site\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/goldenti.com\/site\/wp-json\/wp\/v2\/comments?post=24197"}],"version-history":[{"count":2,"href":"https:\/\/goldenti.com\/site\/wp-json\/wp\/v2\/posts\/24197\/revisions"}],"predecessor-version":[{"id":24200,"href":"https:\/\/goldenti.com\/site\/wp-json\/wp\/v2\/posts\/24197\/revisions\/24200"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/goldenti.com\/site\/wp-json\/wp\/v2\/media\/24199"}],"wp:attachment":[{"href":"https:\/\/goldenti.com\/site\/wp-json\/wp\/v2\/media?parent=24197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/goldenti.com\/site\/wp-json\/wp\/v2\/categories?post=24197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/goldenti.com\/site\/wp-json\/wp\/v2\/tags?post=24197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}