{"id":11682,"date":"2020-09-09T18:26:11","date_gmt":"2020-09-09T16:26:11","guid":{"rendered":"https:\/\/blog.hostinger.io\/co-tutoriales\/?p=11682"},"modified":"2023-01-11T04:39:12","modified_gmt":"2023-01-11T03:39:12","slug":"que-es-angular","status":"publish","type":"post","link":"\/co\/tutoriales\/que-es-angular","title":{"rendered":"\u00bfQu\u00e9 es Angular y cu\u00e1les son sus ventajas?"},"content":{"rendered":"<p>Si est&aacute;s interesado en el desarrollo de software, es posible que hayas o&iacute;do hablar de Angular. Se trata de uno de los frameworks de <a href=\"\/co\/tutoriales\/que-es-javascript-introduccion-basica\/\">JavaScript<\/a> m&aacute;s populares, que los desarrolladores utilizan para crear sitios web din&aacute;micos. En este art&iacute;culo, aprender&aacute;s qu&eacute; es Angular, el concepto de AngularJS, cu&aacute;ndo se cre&oacute; Angular por primera vez y sus ventajas.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/ES-Web-Development-Glossary-for-Beginners.pdf\" target=\"_blank\" rel=\"noopener\">Descarga Glosario Completo de Desarrollo Web<\/a><br><\/p><h2 class=\"wp-block-heading\" id=\"h-que-es-angularjs\">&iquest;Qu&eacute; es AngularJS?<\/h2><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"900\" height=\"400\" src=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2020\/09\/angular-homepage.jpg\" alt=\"Inicio Angular - que es angular\" class=\"wp-image-11683\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2020\/09\/angular-homepage.jpg 900w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2020\/09\/angular-homepage-300x133.jpg 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2020\/09\/angular-homepage-150x67.jpg 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2020\/09\/angular-homepage-768x341.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure><\/div><p>Entonces, &iquest;qu&eacute; es Angular? Es un framework de ingenier&iacute;a de software de c&oacute;digo abierto que se utiliza para crear aplicaciones web de una sola p&aacute;gina. Los desarrolladores tambi&eacute;n lo utilizan para crear men&uacute;s animados para p&aacute;ginas web HTML.<\/p><p>El framework es una creaci&oacute;n de los ingenieros de <a href=\"http:\/\/google.com\/\" target=\"_blank\" rel=\"noopener\">Google<\/a>, Misko Hevery y Adam Abrons. Google lanz&oacute; oficialmente la primera versi&oacute;n, AngularJS, en 2012, y la ha mantenido desde entonces.<\/p><p>Antes del lanzamiento de AngularJS, hab&iacute;a otras formas de crear p&aacute;ginas din&aacute;micas. Sin embargo, no eran tan convenientes como este framework.<\/p><p>AngularJS usa la arquitectura <a href=\"https:\/\/es.wikipedia.org\/wiki\/Modelo%E2%80%93vista%E2%80%93controlador\" target=\"_blank\" rel=\"noopener\">Modelo-Vista-Controlador<\/a> (<strong>MVC<\/strong>), que se usa en el desarrollo de aplicaciones web.<\/p><p>Este tipo de arquitectura consta de:<\/p><ul class=\"wp-block-list\">\n<li><strong>Modelo:<\/strong> la estructura de datos que administra la informaci&oacute;n y recibe informaci&oacute;n del controlador<\/li>\n\n\n\n<li><strong>Vista:<\/strong> la representaci&oacute;n de la informaci&oacute;n<\/li>\n\n\n\n<li><strong>Controlador:<\/strong> responde a la entrada e interact&uacute;a con el modelo<\/li>\n<\/ul><p>En el contexto de AngularJS, el modelo es el framework, mientras que la vista es HTML y el control es JavaScript.<\/p><p>Para hacerlo mas simple:<\/p><ul class=\"wp-block-list\">\n<li>AngularJS <strong>une<\/strong> JavaScript y HTML<\/li>\n\n\n\n<li>JavaScript <strong>acepta<\/strong> la entrada del usuario y la env&iacute;a a AngularJS<\/li>\n\n\n\n<li>AngularJS usa la entrada para <strong>modificar<\/strong> HTML<\/li>\n<\/ul><p>Con el framework que vincula JavaScript y HTML, el c&oacute;digo entre ellos se sincroniza. Este mecanismo facilita el trabajo de los desarrolladores porque reduce la cantidad de c&oacute;digo necesario para escribir.<\/p><h2 class=\"wp-block-heading\" id=\"h-ventajas-de-angularjs\">Ventajas de AngularJS<\/h2><p>AngularJS es popular entre los desarrolladores web por un par de razones:<\/p><ul class=\"wp-block-list\">\n<li><strong>Enlace bidireccional de datos:<\/strong> dado que la arquitectura de AngularJS enlaza JavaScript y HTML, el c&oacute;digo de ambos ya est&aacute; sincronizado. Por lo tanto, el framework ahorra mucho tiempo a los desarrolladores.<\/li>\n\n\n\n<li><strong>Directivas:<\/strong> el marco ampl&iacute;a la funcionalidad de los archivos HTML con directivas. Para habilitar las directivas, los desarrolladores agregan el prefijo <strong>ng-<\/strong> a los atributos HTML. Puedes ver la lista de directivas <a href=\"https:\/\/www.w3schools.com\/angular\/angular_ref_directives.asp\" target=\"_blank\" rel=\"noopener\">aqu&iacute;<\/a>. A continuaci&oacute;n se muestra un ejemplo del uso de directivas:\n<pre data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js\"&gt;&lt;\/script&gt;\n&lt;body&gt;\n\n&lt;div ng-app=\"\" ng-init=\"age='20'\"&gt;\n\n&lt;p&gt;Input your age:&lt;\/p&gt;\n&lt;p&gt;Age: &lt;input type=\"text\" ng-model=\"age\"&gt;&lt;\/p&gt;\n&lt;p&gt;You wrote: {{ age }}&lt;\/p&gt;\n\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n\n&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js\"&gt;&lt;\/script&gt;\n&lt;body&gt;\n\n&lt;div ng-app=\"\" ng-init=\"age='20'\"&gt;\n\n&lt;p&gt;Input your age:&lt;\/p&gt;\n&lt;p&gt;Age: &lt;input type=\"text\" ng-model=\"age\"&gt;&lt;\/p&gt;\n&lt;p&gt;You wrote: {{ age }}&lt;\/p&gt;\n\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<\/li>\n\n\n\n<li><strong>Estructura de c&oacute;digo:<\/strong> AngularJS brinda plantillas; lo que te permite producir aplicaciones con c&oacute;digo limpio. No solo te ahorra tiempo, sino que tambi&eacute;n facilita la modificaci&oacute;n o reparaci&oacute;n de las aplicaciones.<\/li>\n\n\n\n<li><strong>Pruebas:<\/strong> el marco admite pruebas unitarias y de integraci&oacute;n.<\/li>\n\n\n\n<li><strong>Futuro brillante:<\/strong> el futuro de Angular es brillante debido a su funcionalidad y popularidad. Su base de usuarios sigue creciendo y tiene una gran cantidad de documentaci&oacute;n en profundidad que se actualiza constantemente.<\/li>\n\n\n\n<li><strong>Compatibilidad m&oacute;vil y de escritorio:<\/strong> AngularJS puede ejecutarse en la mayor&iacute;a de los navegadores web. No solo en computadoras de escritorio, sino tambi&eacute;n en dispositivos m&oacute;viles.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-antes-de-aprender-angularjs\">Antes de aprender AngularJS<\/h2><p>Debes recordar que AngularJS es un framework de JavaScript. En consecuencia, debes comprender los conceptos b&aacute;sicos del lenguaje de programaci&oacute;n antes de aprender AngularJS.<\/p><p>Lo mismo se aplica a los lenguajes de programaci&oacute;n relacionados como HTML, <a href=\"\/co\/tutoriales\/que-es-css\">CSS<\/a> y AJAX.<\/p><p>Conocer los conceptos b&aacute;sicos de JavaScript antes de aprender AngularJS te permitir&aacute;:<\/p><ul class=\"wp-block-list\">\n<li>Seguir el r&aacute;pido desarrollo de Angular<\/li>\n\n\n\n<li>Saber cu&aacute;ndo usar el marco<\/li>\n\n\n\n<li><a href=\"\/co\/tutoriales\/como-ser-programador-web\">Convertirte en un desarrollador<\/a> flexible e innovador<\/li>\n<\/ul><figure class=\"wp-block-image size-large\"><a href=\"\/co\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/blog.hostinger.io\/co-tutoriales\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner-1024x300.png\" alt=\"\" class=\"wp-image-29291\" srcset=\"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner.png 1024w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner-768x225.png 768w, https:\/\/www.hostinger.com\/co\/tutoriales\/wp-content\/uploads\/sites\/40\/2023\/02\/ES-Web-hosting_in-text-banner-1536x450.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>&iquest;Qu&eacute; es Angular? Se trata de un framework de JavaScript que los desarrolladores utilizan para crear aplicaciones web de una sola p&aacute;gina. Debido al uso de la arquitectura <strong>Modelo-Vista-Controlador<\/strong>, no es necesario escribir manualmente el mismo c&oacute;digo para los archivos HTML y JavaScript.<\/p><p>Aparte de eso, el framework ofrece una serie de beneficios:<\/p><ul class=\"wp-block-list\">\n<li><strong>Plantillas de c&oacute;digo<\/strong><\/li>\n\n\n\n<li><strong>Documentaci&oacute;n extensa<\/strong><\/li>\n\n\n\n<li><strong>Pruebas<\/strong><\/li>\n\n\n\n<li><strong>Compatibilidad m&oacute;vil y de escritorio<\/strong><\/li>\n<\/ul><p>Si tienes preguntas, deja un comentario a continuaci&oacute;n.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Si est&aacute;s interesado en el desarrollo de software, es posible que hayas o&iacute;do hablar de Angular. Se trata de uno de los frameworks de JavaScript m&aacute;s populares, que los desarrolladores utilizan para crear sitios web din&aacute;micos. En este art&iacute;culo, aprender&aacute;s qu&eacute; es Angular, el concepto de AngularJS, cu&aacute;ndo se cre&oacute; Angular por primera vez y [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/co\/tutoriales\/que-es-angular\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":138,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Qu\u00e9 es Angular: Todo sobre el Popular Framework JS %page%","rank_math_description":"\u00bfQu\u00e9 es Angular? En este art\u00edculo, aprender\u00e1s sobre el concepto y las ventajas de la primera versi\u00f3n de este framework, AngularJS.","rank_math_focus_keyword":"qu\u00e9 es angular","footnotes":""},"categories":[8284],"tags":[14112],"class_list":["post-11682","post","type-post","status-publish","format-standard","hentry","category-glosario","tag-que-es-angular"],"hreflangs":[{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-angular","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-angular","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-angular","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-angular","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/11682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/users\/138"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/comments?post=11682"}],"version-history":[{"count":6,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/11682\/revisions"}],"predecessor-version":[{"id":27589,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/posts\/11682\/revisions\/27589"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/media?parent=11682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/categories?post=11682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/co\/tutoriales\/wp-json\/wp\/v2\/tags?post=11682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}