stringtranslate.com

AngularJS

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]

Descripción general

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.

Alcance

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".

Oreja

La tarea realizada por el programa de arranque AngularJS se produjo en tres fases [11] después de que se cargó el DOM:

  1. Creación de un nuevo Inyector
  2. Recopilación de las directivas que decoran el DOM
  3. Vinculación de todas las directivas al ámbito de aplicación

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
Un módulo proporciona soporte para JavaScript, transiciones CSS3 y ganchos de animación de fotogramas clave CSS3 dentro de directivas centrales y personalizadas existentes.
ng-app
Declara el elemento raíz de una aplicación AngularJS, bajo el cual se pueden usar directivas para declarar enlaces y definir el comportamiento.
ng-aria
Un módulo para brindar soporte de accesibilidad a atributos ARIA comunes .
ng-bind
Establece el texto de un elemento DOM en el valor de una expresión. Por ejemplo, <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
Aplicar condicionalmente una clase, dependiendo del valor de una expresión booleana.
ng-controller
Especifica una clase de controlador de JavaScript que evalúa expresiones HTML.
ng-if
Directiva básica de sentencia if que crea una instancia del siguiente elemento si las condiciones son verdaderas. Cuando la condición es falsa, el elemento se elimina del DOM. Cuando es verdadera, se vuelve a insertar un clon del elemento compilado.
ng-init
Se llama una vez cuando se inicializa el elemento.
ng-model
Similar a ng-bind, pero establece un enlace de datos bidireccional entre la vista y el alcance.
ng-model-options
Proporciona ajustes sobre cómo se realizan las actualizaciones del modelo.
ng-repeat
Instanciar un elemento una vez por cada elemento de una colección.
ng-show&ng-hide
Mostrar u ocultar un elemento de forma condicional, según el valor de una expresión booleana. La visualización y ocultación se logra configurando el estilo de visualización CSS.
ng-switch
Instanciar condicionalmente una plantilla de un conjunto de opciones, dependiendo del valor de una expresión de selección.
ng-view
La directiva base responsable de manejar las rutas [12] que resuelven JSON antes de renderizar las plantillas controladas por controladores específicos.

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-appy como data-ng-appson válidos en AngularJS.

Enlace de datos bidireccional

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 $scopeservicio 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
es un método angular utilizado para la comprobación de objetos sucios. Cualquier variable o expresión asignada en $scope configura automáticamente una $watchExpression en Angular. Por lo tanto, asignar una variable a $scope o usar directivas como ng-if, ng-show, ng-repeat , etc. crea automáticamente controles en el ámbito angular. Angular mantiene una matriz simple de $$watchers en los objetos $scope
Diferentes formas de definir un observador en AngularJS.
  • $watch explícitamente un atributo en $scope .
    $scope.$watch('person.username', validateUnique);
  • Coloque una interpolación en su plantilla (se creará un observador para usted en el $scope actual).
  • Pídale a una directiva como ng-model que defina el observador para usted.
    <input ng-model="person.username" />
$digest
es un método angular que AngularJS invoca internamente en intervalos frecuentes. En el método $digest , Angular itera sobre todos los $watches en su ámbito/ámbitos secundarios.
$apply
es un método angular que invoca internamente a $digest . Este método se utiliza cuando se desea indicarle a Angular que inicie manualmente la verificación sucia (ejecutar todos los $watches )
$destroy
es a la vez un método y un evento en angularjs. El método $destroy() elimina un ámbito y todos sus elementos secundarios de la comprobación sucia. El evento $destroy es llamado por angular siempre que se destruye un $scope o $controller.

Historial de desarrollo

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]

Compatibilidad con navegadores heredados

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]

Angular y AngularDart

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]

Angular universal

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]

Bibliotecas

Material de AngularJS

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.

Extensión de Chrome

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.

Actuación

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.myVarse 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 $scopecada ciclo. Miško Hevery sugirió mantener menos de 2000 observadores en cada página. [14]

Véase también

Referencias

  1. ^ "Lanzamientos · angular/angular.js". GitHub . Consultado el 9 de abril de 2021 .
  2. ^ "Versión 1.8.3". 7 de abril de 2022. Consultado el 29 de julio de 2022 .
  3. ^ "AngularJS". docs.angularjs.org . Consultado el 14 de mayo de 2021 .
  4. ^ ab "AngularJS". docs.angularjs.org . Consultado el 9 de abril de 2021 .
  5. ^ ab Darwin, Pete Bacon (27 de julio de 2020). "AngularJS estable y soporte a largo plazo". Blog de Angular . Consultado el 9 de abril de 2021 .
  6. ^ Techson, Mark (2 de febrero de 2021). "Encontrar un camino a seguir con AngularJs". Medium . Consultado el 9 de abril de 2021 .
  7. ^ "¿Qué es Angular?" . Consultado el 12 de febrero de 2013 .
  8. ^ "AngularJS". docs.angularjs.org . Consultado el 9 de abril de 2021 .
  9. ^ "ECMAScript 5.1 anotado, sección 10.2 Entornos léxicos" . Consultado el 3 de enero de 2015 .
  10. ^ Barendregt, Henk; Barendsen, Erik (marzo de 2000), Introducción al cálculo Lambda (PDF)
  11. ^ "Directivas de escritura". angularjs.org. 28 de noviembre de 2012. Consultado el 21 de julio de 2013 .
  12. ^ "AngularJS". docs.angularjs.org . Consultado el 9 de abril de 2021 .
  13. ^ "5 increíbles funciones de AngularJS" . Consultado el 13 de febrero de 2013 .
  14. ^ ab Hevery, Misko. "Enlace de datos en AngularJS" . Consultado el 9 de marzo de 2014 .
  15. ^ "Hola mundo, <angular/> está aquí" . Consultado el 12 de octubre de 2014 .
  16. ^ ab "GetAngular". Angular / BRAT Tech. LLC. Archivado desde el original el 13 de abril de 2010. Consultado el 12 de octubre de 2014 .
  17. ^ "AngularJS: Guía para desarrolladores de v1.5.8: Componentes" . Consultado el 26 de septiembre de 2017 .
  18. ^ "angular.js". GitHub . Consultado el 26 de septiembre de 2017 .
  19. ^ "Versión v1.8.3 · angular/angular.js". GitHub . Consultado el 29 de noviembre de 2023 .
  20. ^ "Compatibilidad con Internet Explorer". Guía para desarrolladores de Angular JS 1.7.7 . Consultado el 12 de febrero de 2019 . 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.
  21. ^ Minar, Igor. "AngularJS 1.3: se acerca una nueva versión". Blog de AngularJS . Archivado desde el original el 2014-10-13 . Consultado el 2014-10-12 .
  22. ^ "Introducción a Angular" . Consultado el 8 de diciembre de 2021 .
  23. ^ "Ok... déjame explicarte: será Angular 4.0". angularjs.blogspot.kr . Archivado desde el original el 2016-12-13 . Consultado el 2016-12-14 .
  24. ^ Fluin, Stephen (26 de abril de 2018). «La versión 5.0.0 de Angular ya está disponible». Medium . Consultado el 9 de abril de 2021 .
  25. ^ Krill, Paul (18 de septiembre de 2017). «Se retrasó el lanzamiento del framework JavaScript AngularJS 5». InfoWorld . Consultado el 9 de abril de 2021 .
  26. ^ Fluin, Stephen (3 de mayo de 2018). «La versión 6 de Angular ya está disponible – Blog de Angular». Blog de Angular . Consultado el 8 de junio de 2018 .
  27. ^ "Versiones y lanzamientos de Angular". angular.io . Consultado el 8 de junio de 2018 .
  28. ^ Pieszak, Mark (7 de enero de 2020). "Análisis profundo de Angular Universal & Server-side Rendering". Medium . Consultado el 9 de abril de 2021 .
  29. ^ "angular/material (GitHub)". GitHub . Consultado el 24 de diciembre de 2020 .
  30. ^ "Documentación de material de AngularJS" . Consultado el 24 de diciembre de 2020 .
  31. ^ Kotaru, V. Keerti (25 de agosto de 2016). Implementación de Material Design con AngularJS: marco de componentes de interfaz de usuario. Apress. p. 4. ISBN 9781484221907.
  32. ^ "Material de AngularJS". material.angularjs.org . Consultado el 4 de mayo de 2022 .
  33. ^ "angular/angularjs-batarang (GitHub)". GitHub . Consultado el 12 de octubre de 2014 .
  34. ^ Ford, Brian. "Presentación de AngularJS Batarang". Blog de AngularJS . Archivado desde el original el 13 de octubre de 2014. Consultado el 12 de octubre de 2014 .
  35. ^ "La extensión batarang de Chrome para AngularJS parece estar rota". Desbordamiento de pila .

Lectura adicional

Enlaces externos