{"id":6368,"date":"2015-11-04T12:25:28","date_gmt":"2015-11-04T12:25:28","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6368"},"modified":"2015-11-04T12:27:01","modified_gmt":"2015-11-04T12:27:01","slug":"primeros-pasos-con-angularjs","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/primeros-pasos-con-angularjs\/","title":{"rendered":"Primeros pasos con AngularJS"},"content":{"rendered":"

AngularJS es un framework de JavaScript de c\u00f3digo abierto mantenido por Google que ayuda con la gesti\u00f3n de lo que se conoce como aplicaciones de una sola p\u00e1gina. Su objetivo es aumentar las aplicaciones basadas en navegador con capacidad de Modelo Vista Controlador (MVC), en un esfuerzo para hacer que el desarrollo y las pruebas sean m\u00e1s f\u00e1ciles.
\n<\/span><\/p>\n

\"angularjs2\"<\/a><\/p>\n

AngularJS est\u00e1 construido en torno a la creencia de que la programaci\u00f3n declarativa es la que debe utilizarse para generar interfaces de usuario y enlazar componentes de software. Este framework adapta y ampl\u00eda el HTML tradicional para servir mejor contenido din\u00e1mico a trav\u00e9s de un data-binding bidireccional que permite la sincronizaci\u00f3n autom\u00e1tica de modelos y vistas. Como resultado, AngularJS pone menos \u00e9nfasis en la manipulaci\u00f3n del DOM y mejora la testeabilidad y el rendimiento.<\/p>\n

Angular es una soluci\u00f3n completa<\/strong> que incluye pr\u00e1cticamente todos los aspectos que puedes necesitar para crear una aplicaci\u00f3n cliente en javascript.<\/p>\n

Para utilizar este framework en vuestras aplicaciones Web tan solo ten\u00e9is que acceder a la p\u00e1gina oficial de AngularJS<\/a> y descargar el archivo js para incluirlo en vuestra p\u00e1gina como por eejmplo de la siguiente forma:<\/p>\n

\u00a0

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<script<\/span><\/a> src<\/span>=<\/span>"js\/angular.min.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span><\/pre><\/div><\/div><\/p>\n
Vamos estudiar el siguiente ejemplo sencillo que tan solo muestra un campo de texto para ingresar tu nombre:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> ng-app=<\/span>""<\/span>><\/span>\n  <p<\/span><\/a>><\/span>Escribe tu nombre: <input<\/span><\/a> type<\/span>=<\/span>"text"<\/span> ng-model=<\/span>"name"<\/span>><\/<\/span>p<\/span><\/a>><\/span>\n  <p<\/span><\/a> ng-bind=<\/span>"name"<\/span>><\/<\/span>p<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div><\/p>\n
La directiva ng-app est\u00e1 indicando que la apliaci\u00f3n AngularJS reside dentro de este elemento <div>.<\/p>\n
La directiva ng-model est\u00e1 indicando que se est\u00e1 asociando el valor del campo de texto con una variable de la aplicaci\u00f3n (modelo).<\/p>\n
Y podemos usar la expresi\u00f3n de AngularJS {{name}} para mostrar el modelo en la vista.<\/p>\n
Todo lo que se escribe en el input o campo de texto (modelo) se refresca autom\u00e1ticamente en la vista.<\/p>\n
Ver este ejemplo sencillo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
AngularJS es un framework de JavaScript de c\u00f3digo abierto mantenido por Google que ayuda con la gesti\u00f3n de lo que se conoce como aplicaciones de una sola p\u00e1gina. Su objetivo es aumentar las aplicaciones basadas en navegador con capacidad de Modelo Vista Controlador (MVC), en un esfuerzo para hacer que el desarrollo y las pruebas […]<\/p>\n","protected":false},"author":1,"featured_media":6693,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[166],"class_list":["post-6368","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-framework"],"yoast_head":"\nPrimeros pasos con AngularJS - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Primeros pasos con AngularJS - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"AngularJS es un framework de JavaScript de c\u00f3digo abierto mantenido por Google que ayuda con la gesti\u00f3n de lo que se conoce como aplicaciones de una sola p\u00e1gina. Su objetivo es aumentar las aplicaciones basadas en navegador con capacidad de Modelo Vista Controlador (MVC), en un esfuerzo para hacer que el desarrollo y las pruebas […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/primeros-pasos-con-angularjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2015-11-04T12:25:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-11-04T12:27:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/11\/angularjs.png\" \/>\n\t<meta property=\"og:image:width\" content=\"218\" \/>\n\t<meta property=\"og:image:height\" content=\"231\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/primeros-pasos-con-angularjs\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/primeros-pasos-con-angularjs\/\",\"name\":\"Primeros pasos con AngularJS - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/primeros-pasos-con-angularjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/primeros-pasos-con-angularjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/11\/angularjs.png\",\"datePublished\":\"2015-11-04T12:25:28+00:00\",\"dateModified\":\"2015-11-04T12:27:01+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/primeros-pasos-con-angularjs\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/primeros-pasos-con-angularjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/primeros-pasos-con-angularjs\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/11\/angularjs.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/11\/angularjs.png\",\"width\":218,\"height\":231},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/primeros-pasos-con-angularjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Primeros pasos con AngularJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Primeros pasos con AngularJS - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Primeros pasos con AngularJS - Jose Aguilar Blog","og_description":"AngularJS es un framework de JavaScript de c\u00f3digo abierto mantenido por Google que ayuda con la gesti\u00f3n de lo que se conoce como aplicaciones de una sola p\u00e1gina. Su objetivo es aumentar las aplicaciones basadas en navegador con capacidad de Modelo Vista Controlador (MVC), en un esfuerzo para hacer que el desarrollo y las pruebas […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/primeros-pasos-con-angularjs\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2015-11-04T12:25:28+00:00","article_modified_time":"2015-11-04T12:27:01+00:00","og_image":[{"width":218,"height":231,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/11\/angularjs.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/primeros-pasos-con-angularjs\/","url":"https:\/\/www.jose-aguilar.com\/blog\/primeros-pasos-con-angularjs\/","name":"Primeros pasos con AngularJS - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/primeros-pasos-con-angularjs\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/primeros-pasos-con-angularjs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/11\/angularjs.png","datePublished":"2015-11-04T12:25:28+00:00","dateModified":"2015-11-04T12:27:01+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/primeros-pasos-con-angularjs\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/primeros-pasos-con-angularjs\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/primeros-pasos-con-angularjs\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/11\/angularjs.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/11\/angularjs.png","width":218,"height":231},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/primeros-pasos-con-angularjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Primeros pasos con AngularJS"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=6368"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6368\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/6693"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}