AngularJS es un framework web basado en JavaScript, libre y de código abierto, que ya no se fabrica y que sirve para desarrollar aplicaciones de una sola página . Su mantenimiento principal está a cargo de Google y una comunidad de personas y corporaciones. Su objetivo era simplificar tanto el desarrollo como la prueba de dichas aplicaciones al proporcionar un framework para arquitecturas de modelo-vista-controlador (MVC) y modelo-vista-vista-modelo (MVVM) del lado del cliente, junto con componentes que se usan comúnmente en aplicaciones web y aplicaciones web progresivas .
AngularJS se utilizó como interfaz de la pila MEAN , que consistía en la base de datos MongoDB , el marco de servidor de aplicaciones web Express.js , el propio AngularJS (o Angular ) y el entorno de ejecución del servidor Node.js.
A partir del 1 de enero de 2022, Google ya no actualiza AngularJS para solucionar problemas de seguridad, compatibilidad del navegador o jQuery . [3] [4] [5] El equipo de Angular recomienda actualizar a Angular (v2+) como el mejor camino a seguir, pero también brindó otras opciones. [6]
El marco AngularJS funcionaba leyendo primero la página HTML ( lenguaje de marcado de hipertexto ), que tenía atributos HTML personalizados adicionales integrados. Angular interpretaba esos atributos como directivas para vincular partes de entrada o salida de la página a un modelo representado por variables estándar de JavaScript . Los valores de esas variables de JavaScript se podían configurar manualmente dentro del código o recuperarse de recursos JSON estáticos o dinámicos.
AngularJS se creó con la idea de que la programación declarativa se debe utilizar para crear interfaces de usuario y conectar componentes de software , mientras que la programación imperativa se adapta mejor a la definición de la lógica empresarial de una aplicación . [7] El marco adaptó y extendió el HTML tradicional para presentar contenido dinámico a través de un enlace de datos bidireccional que permitió la sincronización automática de modelos y vistas. Como resultado, AngularJS dejó de enfatizar la manipulación explícita del Modelo de objetos de documento (DOM) con el objetivo de mejorar la capacidad de prueba y el rendimiento.
Los objetivos de diseño de AngularJS incluían:
AngularJS implementó el patrón MVC para separar los componentes de presentación, datos y lógica. [8] Mediante la inyección de dependencias , Angular incorporó servicios tradicionalmente del lado del servidor , como controladores dependientes de la vista, a las aplicaciones web del lado del cliente. En consecuencia, se pudo reducir gran parte de la carga del servidor.
AngularJS utilizó el término "alcance" de una manera similar a los fundamentos de la informática.
El ámbito en informática describe cuándo es válido un enlace particular en el programa . La especificación ECMA-262 define el ámbito como: un entorno léxico en el que se ejecuta un objeto Función en scripts web del lado del cliente; [9] similar a cómo se define el ámbito en el cálculo lambda . [10]
Como parte de la arquitectura "MVC", el ámbito forma el "modelo" y tanto la "vista" como el "controlador" pueden acceder a todas las variables definidas en el ámbito. El ámbito actúa como un pegamento y une la "vista" y el "controlador".
La tarea realizada por el programa de arranque AngularJS se produjo en tres fases [11] después de que se cargó el DOM:
Las directivas de AngularJS permitían al desarrollador especificar elementos y atributos HTML personalizados y reutilizables que definen los enlaces de datos y el comportamiento de los componentes de presentación. Algunas de las directivas más utilizadas fueron:
ng-animate
ng-app
ng-aria
ng-bind
<span ng-bind="name"></span>
muestra el valor de 'nombre' dentro del elemento span. Cualquier cambio en la variable 'nombre' en el ámbito de la aplicación se refleja instantáneamente en el DOM.ng-class
ng-controller
ng-if
ng-init
ng-model
ng-bind
, pero establece un enlace de datos bidireccional entre la vista y el alcance.ng-model-options
ng-repeat
ng-show
&ng-hide
ng-switch
ng-view
Dado que ng-*
los atributos no son válidos en las especificaciones HTML, data-ng-*
también se pueden utilizar como prefijo. Por ejemplo, tanto ng-app
y como data-ng-app
son válidos en AngularJS.
La característica más notable de AngularJS es que alivia en gran medida las responsabilidades de creación de plantillas del servidor. En cambio, las plantillas se representaban en HTML simple según los datos contenidos en un ámbito definido en el modelo. El $scope
servicio de Angular detectaba cambios en la sección del modelo y modificaba las expresiones HTML en la vista a través de un controlador. Asimismo, cualquier alteración en la vista se reflejaba en el modelo. Esto evitaba la necesidad de manipular activamente el DOM y fomentaba el arranque y la creación rápida de prototipos de aplicaciones web. [13]
AngularJS detectaba cambios en los modelos comparando los valores actuales con los valores almacenados anteriormente en un proceso de verificación sucia, a diferencia de Ember.js y Backbone.js que activaban los oyentes cuando se modificaban los valores del modelo. [14]
$watch
$scope.$watch('person.username', validateUnique);
<input ng-model="person.username" />
$digest
$apply
$destroy
AngularJS fue desarrollado originalmente en 2009 por Miško Hevery [15] en Brat Tech LLC [16] como el software detrás de un servicio de almacenamiento JSON en línea , que habría tenido un precio por megabyte, para aplicaciones fáciles de crear para la empresa. Esta empresa estaba ubicada en el dominio web "GetAngular.com", [16] y tenía algunos suscriptores, antes de que los dos decidieran abandonar la idea comercial y lanzar Angular como una biblioteca de código abierto.
La versión 1.6 agregó muchos de los conceptos de Angular a AngularJS, incluido el concepto de una arquitectura de aplicación basada en componentes. [17] Esta versión, entre otras cosas, eliminó el Sandbox, que muchos desarrolladores creían que proporcionaba seguridad adicional, a pesar de numerosas vulnerabilidades que se habían descubierto que eludían el Sandbox. [18] La versión estable actual (a partir de noviembre de 2023) de AngularJS es 1.8.3 [19]
En enero de 2018, se anunció un cronograma para la eliminación gradual de AngularJS: después del lanzamiento de 1.7.0, el desarrollo activo en AngularJS continuaría hasta el 30 de junio de 2018. Posteriormente, 1.7 recibió soporte hasta el 31 de diciembre de 2021 como soporte a largo plazo . [4] [5]
Las versiones 1.3 y posteriores de AngularJS no eran compatibles con Internet Explorer 8 o versiones anteriores. Si bien AngularJS 1.2 era compatible con IE8, su equipo no lo es. [20] [21]
Las versiones posteriores de AngularJS se denominan simplemente Angular . [22] Angular es una reescritura incompatible de AngularJS basada en TypeScript . Angular 4 se anunció el 13 de diciembre de 2016, omitiendo la versión 3 para evitar una confusión debido a la falta de alineación de la versión del paquete del enrutador que ya se distribuyó como v3.3.0. [23]
AngularDart funciona en Dart , que es un lenguaje de programación orientado a objetos , definido por clases , de herencia única que utiliza una sintaxis de estilo C , que es diferente de Angular JS (que usa JavaScript ) y Angular 2/Angular 4 (que usa TypeScript ). Angular 4 se lanzó en marzo de 2017, con la versión del marco alineada con el número de versión del enrutador que usaba. Angular 5 se lanzó el 1 de noviembre de 2017. [24] Las mejoras clave en Angular 5 incluyen soporte para aplicaciones web progresivas, un optimizador de compilación y mejoras relacionadas con Material Design. [25] Angular 6 se lanzó el 3 de mayo de 2018, [26] Angular 7 se lanzó el 18 de octubre de 2018 y Angular 8 se lanzó el 28 de mayo de 2019. Angular sigue los estándares de versiones semánticas, y cada número de versión principal indica cambios potencialmente importantes. Angular se ha comprometido a brindar 6 meses de soporte activo para cada versión principal, seguido de 12 meses de soporte a largo plazo. Los lanzamientos principales se realizan cada dos años y se lanzan entre 1 y 3 lanzamientos menores por cada lanzamiento principal. [27]
Una aplicación Angular normal se ejecuta en el navegador, mientras que Angular Universal genera páginas de aplicación estáticas en el servidor a través de la representación del lado del servidor (SSR). [28]
AngularJS Material [29] [30] era una biblioteca de componentes de interfaz de usuario que implementaba Material Design en AngularJS. [31] La biblioteca proporcionaba un conjunto de componentes de interfaz de usuario reutilizables, bien probados y accesibles . En enero de 2022, la biblioteca se cerró, como se anunció en su sitio web oficial. [32] La biblioteca AngularJS Material es un producto maduro y estable que está listo para su uso en producción y funciona solo con AngularJS 1.x. La biblioteca Angular Material está disponible en el repositorio de GitHub angular/material2.
En julio de 2012, el equipo de Angular creó una extensión para el navegador Google Chrome llamada Batarang, [33] que mejoró la experiencia de depuración de las aplicaciones web creadas con Angular. La extensión tenía como objetivo permitir una fácil detección de cuellos de botella en el rendimiento y ofrecía una interfaz gráfica de usuario para depurar aplicaciones. [34] Durante un tiempo, a finales de 2014 y principios de 2015, la extensión no era compatible con las versiones recientes (posteriores a la v1.2.x) de Angular. [35] La última actualización realizada a esta extensión fue el 4 de abril de 2017.
AngularJS estableció el paradigma de un ciclo de resumen . Este ciclo podría considerarse un bucle, durante el cual AngularJS verificaba si había algún cambio en todas las variables observadas por todos los $scopes
. Si $scope.myVar
se definió en un controlador y esta variable se marcó para su observación, Angular monitorearía los cambios en myVar en cada iteración del bucle.
Este enfoque podría generar una representación lenta cuando AngularJS verificaba demasiadas variables en $scope
cada ciclo. Miško Hevery sugirió mantener menos de 2000 observadores en cada página. [14]
AngularJS 1.3 ha dejado de ofrecer compatibilidad con IE8. Lea más sobre esto en nuestro blog. AngularJS 1.2 seguirá ofreciendo compatibilidad con IE8, pero el equipo central no tiene previsto dedicar tiempo a solucionar problemas específicos de IE8 o versiones anteriores.