{"id":78,"date":"2016-12-30T02:48:02","date_gmt":"2016-12-30T02:48:02","guid":{"rendered":"http:\/\/52.201.184.187\/?p=78"},"modified":"2016-12-30T02:59:20","modified_gmt":"2016-12-30T02:59:20","slug":"introduccion-a-angular-2","status":"publish","type":"post","link":"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/","title":{"rendered":"Introducci\u00f3n a Angular 2"},"content":{"rendered":"<h1>Un ejemplo b\u00e1sico de Angular 2<\/h1>\n<h2>Palabras iniciales<\/h2>\n<p>El objetivo de este art\u00edculo es mostrar con un ejemplo los conceptos b\u00e1sicos\u00a0de Angular 2. \u00a0Para esto, vamos a hacer un contador de lo m\u00e1s simple. Arrancar\u00e1 en cero, y cuando presionemos sumar, queremos que sume internamente y muestre el valor actual del contador. An\u00e1logamente, cuando apretemos restar, deber\u00e1 decrementar su valor y mostrarlo.<\/p>\n<h2>Repositorio del proyecto<\/h2>\n<p>Pueden encontrar el c\u00f3digo fuente en\u00a0<a href=\"https:\/\/bitbucket.org\/etebes\/techie-angular2\/overview\">https:\/\/bitbucket.org\/etebes\/techie-angular2\/overview<\/a><\/p>\n<h2>Manos a la obra<\/h2>\n<p>Angular 2\u00a0gira alrededor de 2\u00a0conceptos: m\u00f3dulos y \u00a0componentes. Los m\u00f3dulos son porciones de c\u00f3digo separados con alg\u00fan criterio. Importan otros m\u00f3dulos y declaran componentes. Los componentes son la manera en la que nuestro c\u00f3digo interact\u00faa con el usuario final: toman datos de entrada, muestran informaci\u00f3n. En ambos casos, son pedazos de c\u00f3digo que tienen su estado e interact\u00faan con otras porciones de c\u00f3digo.<\/p>\n<p><a href=\"http:\/\/52.201.184.187\/wp-content\/uploads\/2016\/12\/angular2-estructuraProyecto.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-80\" src=\"http:\/\/52.201.184.187\/wp-content\/uploads\/2016\/12\/angular2-estructuraProyecto.png\" alt=\"estructura de un proyecto en angular 2\" width=\"242\" height=\"256\" \/><\/a><\/p>\n<p>estructura de un proyecto en angular 2<\/p>\n<p>El ejemplo b\u00e1sico de la documentaci\u00f3n oficial nos habla de 4 archivos:<\/p>\n<ol>\n<li>index.html<\/li>\n<li>main.js<\/li>\n<li>app.module.js<\/li>\n<li>app.component.js<\/li>\n<\/ol>\n<p>En main.js se inicia nuestra aplicaci\u00f3n. Cuando el DOM est\u00e1 listo, Angular empieza a jugar. Ah\u00ed es donde debemos decirle qu\u00e9 m\u00f3dulo queremos que levante. En nuestro caso ser\u00e1 AppModule.<\/p>\n<pre>(function (app) {\r\n document.addEventListener('DOMContentLoaded', function () {\r\n ng.platformBrowserDynamic\r\n .platformBrowserDynamic()\r\n .bootstrapModule(app.AppModule);\r\n });\r\n })(window.app || (window.app = {}));\r\n\r\n<\/pre>\n<p>En app.module.js encontramos la declaraci\u00f3n de dicho m\u00f3dulo, con sus dependencias\u00a0y declaraciones.<\/p>\n<ul>\n<li>Con \u00abimports\u00bb decimos de qu\u00e9 otros m\u00f3dulos depende el nuestro.<\/li>\n<li>Con \u00abdeclarations\u00bb indicamos qu\u00e9 componentes\u00a0declaramos en este m\u00f3dulo.<\/li>\n<li>Con \u00abbootstrap\u00bb le decimos qu\u00e9 componentes queremos mostrar.<\/li>\n<li>Disponemos de un constructor para inicializar todo lo que querramos.<\/li>\n<\/ul>\n<pre>(function (app) {\r\n app.AppModule =\r\n ng.core.NgModule({\r\n imports: [ng.platformBrowser.BrowserModule],\r\n declarations: [app.ContadorComponent],\r\n bootstrap: [app.ContadorComponent]\r\n })\r\n .Class({\r\n constructor: function () {}\r\n });\r\n})(window.app || (window.app = {}));\r\n\r\n<\/pre>\n<p>En app.component.js ponemos la declaraci\u00f3n de nuestro componente.<\/p>\n<ul>\n<li>\u00abselector\u00bb es la identificaci\u00f3n de nuestro componente. Indicamos con qu\u00e9 tag\u00a0vamos a ir a buscarlo desde el html.<\/li>\n<li>\u00abtemplate\u00bb es la manera en la que se mostrar\u00e1 nuestro componente (html). Puede ser reemplazado por \u00abtemplateUrl\u00bb, que es la URL en la que se encontrar\u00e1 el template html.<\/li>\n<li>Disponemos de un constructor para inicializar todo lo que querramos.<\/li>\n<li>Luego del constructor declararemos todas las funciones que querramos invocar en nuestro componente. Estas funciones estar\u00e1n disponibles desde el template de nuestro componente, y las podremos vincular a los eventos que dispare el usuario.<\/li>\n<\/ul>\n<pre>\r\n(function (app) {\r\n app.ContadorComponent =\r\n ng.core.Component({\r\n selector: 'contador',\r\n templateUrl: 'app\/contador.html'\r\n })\r\n .Class({\r\n constructor: function () {\r\n this.valor = 0;\r\n },\r\n sumar: function () {\r\n this.valor++;\r\n },\r\n restar: function () {\r\n this.valor--;\r\n }\r\n });\r\n})(window.app || (window.app = {}));<\/pre>\n<p>En index.html podremos usar nuestros componentes. Los incluiremos con un tag extendido de html. Por ejemplo, si declaramos un componente llamado contador, luego lo incluiremos as\u00ed:<\/p>\n<pre>&amp;lt;pre&amp;gt;&amp;lt;code&amp;gt;&amp;lt;contador&amp;gt;cargando...&amp;lt;\/contador&amp;gt;&amp;lt;\/pre&amp;gt;&amp;lt;\/code&amp;gt;<\/pre>\n<p>&nbsp;<\/p>\n<h2>Algunos links con info de inter\u00e9s en los que me bas\u00e9<\/h2>\n<p><a href=\"http:\/\/www.angular2.com\/\">http:\/\/www.angular2.com\/<\/a><\/p>\n<p><a href=\"https:\/\/angular.io\/docs\/js\/latest\/quickstart.html\">https:\/\/angular.io\/docs\/js\/latest\/quickstart.html<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Un ejemplo b\u00e1sico de Angular 2 Palabras iniciales El objetivo de este art\u00edculo es mostrar con un ejemplo los conceptos b\u00e1sicos\u00a0de Angular 2. \u00a0Para esto, vamos a hacer un contador de lo m\u00e1s simple. Arrancar\u00e1 en cero, y cuando presionemos sumar, queremos que sume internamente y muestre el valor actual del contador. An\u00e1logamente, cuando apretemos\u2026 <span class=\"read-more\"><a href=\"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/\">Leer m\u00e1s &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,4],"tags":[16,15,17,7,18],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introducci\u00f3n a Angular 2 - Desarrollo \u00c1gil<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducci\u00f3n a Angular 2 - Desarrollo \u00c1gil\" \/>\n<meta property=\"og:description\" content=\"Un ejemplo b\u00e1sico de Angular 2 Palabras iniciales El objetivo de este art\u00edculo es mostrar con un ejemplo los conceptos b\u00e1sicos\u00a0de Angular 2. \u00a0Para esto, vamos a hacer un contador de lo m\u00e1s simple. Arrancar\u00e1 en cero, y cuando presionemos sumar, queremos que sume internamente y muestre el valor actual del contador. An\u00e1logamente, cuando apretemos\u2026 Leer m\u00e1s &raquo;\" \/>\n<meta property=\"og:url\" content=\"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Desarrollo \u00c1gil\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-30T02:48:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-12-30T02:59:20+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/52.201.184.187\/wp-content\/uploads\/2016\/12\/angular2-estructuraProyecto.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@emilianotebes\" \/>\n<meta name=\"twitter:site\" content=\"@emilianotebes\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Emiliano\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"http:\/\/52.201.184.187\/blog\/#website\",\"url\":\"http:\/\/52.201.184.187\/blog\/\",\"name\":\"Desarrollo \\u00c1gil\",\"description\":\"Sofware por y para humanos\",\"publisher\":{\"@id\":\"http:\/\/52.201.184.187\/blog\/#\/schema\/person\/d3f309d88ee70165de93b55560c9f851\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/52.201.184.187\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es\"},{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#primaryimage\",\"inLanguage\":\"es\",\"url\":\"http:\/\/52.201.184.187\/wp-content\/uploads\/2016\/12\/angular2-estructuraProyecto.png\",\"contentUrl\":\"http:\/\/52.201.184.187\/wp-content\/uploads\/2016\/12\/angular2-estructuraProyecto.png\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#webpage\",\"url\":\"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/\",\"name\":\"Introducci\\u00f3n a Angular 2 - Desarrollo \\u00c1gil\",\"isPartOf\":{\"@id\":\"http:\/\/52.201.184.187\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#primaryimage\"},\"datePublished\":\"2016-12-30T02:48:02+00:00\",\"dateModified\":\"2016-12-30T02:59:20+00:00\",\"breadcrumb\":{\"@id\":\"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"http:\/\/desarrollo-agil.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introducci\\u00f3n a Angular 2\"}]},{\"@type\":\"Article\",\"@id\":\"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#webpage\"},\"author\":{\"@id\":\"http:\/\/52.201.184.187\/blog\/#\/schema\/person\/d3f309d88ee70165de93b55560c9f851\"},\"headline\":\"Introducci\\u00f3n a Angular 2\",\"datePublished\":\"2016-12-30T02:48:02+00:00\",\"dateModified\":\"2016-12-30T02:59:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#webpage\"},\"wordCount\":440,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/52.201.184.187\/blog\/#\/schema\/person\/d3f309d88ee70165de93b55560c9f851\"},\"image\":{\"@id\":\"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/52.201.184.187\/wp-content\/uploads\/2016\/12\/angular2-estructuraProyecto.png\",\"keywords\":[\"angular\",\"angular 2\",\"html\",\"Javascript\",\"MVC\"],\"articleSection\":[\"HTML\",\"Javascript\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#respond\"]}]},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"http:\/\/52.201.184.187\/blog\/#\/schema\/person\/d3f309d88ee70165de93b55560c9f851\",\"name\":\"Emiliano\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/52.201.184.187\/blog\/#personlogo\",\"inLanguage\":\"es\",\"url\":\"http:\/\/2.gravatar.com\/avatar\/e2997f02fe4216c2cce9e5a88e3e3726?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/2.gravatar.com\/avatar\/e2997f02fe4216c2cce9e5a88e3e3726?s=96&d=mm&r=g\",\"caption\":\"Emiliano\"},\"logo\":{\"@id\":\"http:\/\/52.201.184.187\/blog\/#personlogo\"},\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/emilianotebes\/\",\"https:\/\/twitter.com\/emilianotebes\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introducci\u00f3n a Angular 2 - Desarrollo \u00c1gil","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":"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/","og_locale":"es_ES","og_type":"article","og_title":"Introducci\u00f3n a Angular 2 - Desarrollo \u00c1gil","og_description":"Un ejemplo b\u00e1sico de Angular 2 Palabras iniciales El objetivo de este art\u00edculo es mostrar con un ejemplo los conceptos b\u00e1sicos\u00a0de Angular 2. \u00a0Para esto, vamos a hacer un contador de lo m\u00e1s simple. Arrancar\u00e1 en cero, y cuando presionemos sumar, queremos que sume internamente y muestre el valor actual del contador. An\u00e1logamente, cuando apretemos\u2026 Leer m\u00e1s &raquo;","og_url":"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/","og_site_name":"Desarrollo \u00c1gil","article_published_time":"2016-12-30T02:48:02+00:00","article_modified_time":"2016-12-30T02:59:20+00:00","og_image":[{"url":"http:\/\/52.201.184.187\/wp-content\/uploads\/2016\/12\/angular2-estructuraProyecto.png"}],"twitter_card":"summary_large_image","twitter_creator":"@emilianotebes","twitter_site":"@emilianotebes","twitter_misc":{"Escrito por":"Emiliano","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"http:\/\/52.201.184.187\/blog\/#website","url":"http:\/\/52.201.184.187\/blog\/","name":"Desarrollo \u00c1gil","description":"Sofware por y para humanos","publisher":{"@id":"http:\/\/52.201.184.187\/blog\/#\/schema\/person\/d3f309d88ee70165de93b55560c9f851"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/52.201.184.187\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es"},{"@type":"ImageObject","@id":"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#primaryimage","inLanguage":"es","url":"http:\/\/52.201.184.187\/wp-content\/uploads\/2016\/12\/angular2-estructuraProyecto.png","contentUrl":"http:\/\/52.201.184.187\/wp-content\/uploads\/2016\/12\/angular2-estructuraProyecto.png"},{"@type":"WebPage","@id":"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#webpage","url":"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/","name":"Introducci\u00f3n a Angular 2 - Desarrollo \u00c1gil","isPartOf":{"@id":"http:\/\/52.201.184.187\/blog\/#website"},"primaryImageOfPage":{"@id":"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#primaryimage"},"datePublished":"2016-12-30T02:48:02+00:00","dateModified":"2016-12-30T02:59:20+00:00","breadcrumb":{"@id":"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"http:\/\/desarrollo-agil.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Introducci\u00f3n a Angular 2"}]},{"@type":"Article","@id":"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#article","isPartOf":{"@id":"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#webpage"},"author":{"@id":"http:\/\/52.201.184.187\/blog\/#\/schema\/person\/d3f309d88ee70165de93b55560c9f851"},"headline":"Introducci\u00f3n a Angular 2","datePublished":"2016-12-30T02:48:02+00:00","dateModified":"2016-12-30T02:59:20+00:00","mainEntityOfPage":{"@id":"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#webpage"},"wordCount":440,"commentCount":0,"publisher":{"@id":"http:\/\/52.201.184.187\/blog\/#\/schema\/person\/d3f309d88ee70165de93b55560c9f851"},"image":{"@id":"http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#primaryimage"},"thumbnailUrl":"http:\/\/52.201.184.187\/wp-content\/uploads\/2016\/12\/angular2-estructuraProyecto.png","keywords":["angular","angular 2","html","Javascript","MVC"],"articleSection":["HTML","Javascript"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/52.201.184.187\/blog\/javascript\/introduccion-a-angular-2\/#respond"]}]},{"@type":["Person","Organization"],"@id":"http:\/\/52.201.184.187\/blog\/#\/schema\/person\/d3f309d88ee70165de93b55560c9f851","name":"Emiliano","image":{"@type":"ImageObject","@id":"http:\/\/52.201.184.187\/blog\/#personlogo","inLanguage":"es","url":"http:\/\/2.gravatar.com\/avatar\/e2997f02fe4216c2cce9e5a88e3e3726?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/e2997f02fe4216c2cce9e5a88e3e3726?s=96&d=mm&r=g","caption":"Emiliano"},"logo":{"@id":"http:\/\/52.201.184.187\/blog\/#personlogo"},"sameAs":["https:\/\/www.linkedin.com\/in\/emilianotebes\/","https:\/\/twitter.com\/emilianotebes"]}]}},"_links":{"self":[{"href":"http:\/\/52.201.184.187\/blog\/wp-json\/wp\/v2\/posts\/78"}],"collection":[{"href":"http:\/\/52.201.184.187\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/52.201.184.187\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/52.201.184.187\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/52.201.184.187\/blog\/wp-json\/wp\/v2\/comments?post=78"}],"version-history":[{"count":11,"href":"http:\/\/52.201.184.187\/blog\/wp-json\/wp\/v2\/posts\/78\/revisions"}],"predecessor-version":[{"id":90,"href":"http:\/\/52.201.184.187\/blog\/wp-json\/wp\/v2\/posts\/78\/revisions\/90"}],"wp:attachment":[{"href":"http:\/\/52.201.184.187\/blog\/wp-json\/wp\/v2\/media?parent=78"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/52.201.184.187\/blog\/wp-json\/wp\/v2\/categories?post=78"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/52.201.184.187\/blog\/wp-json\/wp\/v2\/tags?post=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}