stringtranslate.com

angularjs

AngularJS es un marco web basado en JavaScript , gratuito y de código abierto descontinuado para desarrollar aplicaciones de una sola página . Fue mantenido principalmente por Google y una comunidad de individuos y corporaciones. Su objetivo era simplificar tanto el desarrollo como las pruebas de dichas aplicaciones proporcionando un marco para las arquitecturas modelo-vista-controlador (MVC) y modelo-vista-modelo (MVVM) del lado del cliente, junto con componentes comúnmente utilizados en aplicaciones web y progresivas. aplicaciones web .

AngularJS se utilizó como interfaz de la pila MEAN , que constaba de la base de datos MongoDB , el marco del 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 proporcionaron algunas otras opciones. [6]

Descripción general

El marco AngularJS funcionó leyendo primero la página del lenguaje de marcado de hipertexto (HTML), que tenía atributos HTML personalizados adicionales integrados. Angular interpretó 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 pueden establecer manualmente dentro del código o recuperarse de recursos JSON estáticos o dinámicos .

AngularJS se basó en la creencia de que la programación declarativa debería usarse para crear interfaces de usuario y conectar componentes de software , mientras que la programación imperativa era más adecuada para definir la lógica empresarial de una aplicación . [7] El marco adaptó y amplió el HTML tradicional para presentar contenido dinámico a través del enlace de datos bidireccional que permitió la sincronización automática de modelos y vistas. Como resultado, AngularJS restó importancia a 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 incluyeron:

AngularJS implementó el patrón MVC para separar los componentes de presentación, datos y lógica. [8] Utilizando la inyección de dependencia , Angular llevó servicios tradicionalmente del lado del servidor , como controladores dependientes de la vista, a aplicaciones web del lado del cliente. En consecuencia, se podría reducir gran parte de la carga sobre el servidor.

Alcance

AngularJS utilizó el término "alcance" de una manera similar a los fundamentos de la informática.

El alcance en informática describe cuándo en el programa un enlace particular es válido. La especificación ECMA-262 define el alcance 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 alcance en el cálculo lambda . [10]

Como parte de la arquitectura "MVC", el alcance forma el "Modelo", y se puede acceder a todas las variables definidas en el alcance mediante la "Vista" y el "Controlador". El alcance se comporta como un pegamento y une la "Vista" y el "Controlador".

Oreja

La tarea realizada por el bootstrapper de 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 alcance

Las directivas de AngularJS permitieron al desarrollador especificar elementos y atributos personalizados y reutilizables similares a HTML 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, transición CSS3 y ganchos de animación de fotogramas clave CSS3 dentro de directivas principales y personalizadas existentes.

Dado que ng-*los atributos no son válidos en las especificaciones HTML, data-ng-*también se pueden utilizar como prefijo. Por ejemplo, ambos ng-appy data-ng-appson válidos en AngularJS.

ng-app
Declara el elemento raíz de una aplicación AngularJS, bajo el cual se pueden usar directivas para declarar enlaces y definir comportamiento.
ng-aria
Un módulo para soporte de accesibilidad de atributos ARIA comunes .
ng-bind
Establece el texto de un elemento DOM al 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 alcance 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 JavaScript que evalúa expresiones HTML.
ng-if
Directiva de declaración if básica 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 verdadero, 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
Cree una instancia de un elemento una vez por elemento de una colección.
ng-show&ng-hide
Muestra u oculta condicionalmente un elemento, según el valor de una expresión booleana. Mostrar y ocultar se logra configurando el estilo de visualización CSS.
ng-switch
Cree una instancia condicional de una plantilla a partir de un conjunto de opciones, según el valor de una expresión de selección.
ng-view
La directiva base responsable de manejar rutas [12] que resuelven JSON antes de representar plantillas controladas por controladores específicos.

Enlace de datos bidireccional

El enlace de datos bidireccional de AngularJS tuvo su característica más notable, aliviando en gran medida al servidor backend de las responsabilidades de plantillas. En cambio, las plantillas se representaron en HTML simple según los datos contenidos en un alcance definido en el modelo. El $scopeservicio en Angular detectó cambios en la sección del modelo y modificó expresiones HTML en la vista a través de un controlador. Asimismo, cualquier alteración en la vista quedó reflejada en el modelo. Esto evitó la necesidad de manipular activamente el DOM y fomentó el arranque y la creación rápida de prototipos de aplicaciones web. [13] AngularJS detectó 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 activaron los oyentes cuando se cambiaron los valores del modelo. [14]

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

Historia del 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 , cuyo precio habría sido 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 de negocio 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 arquitectura de aplicación basada en componentes. [17] Esta versión, entre otras, eliminó el Sandbox, que muchos desarrolladores creían que proporcionaba seguridad adicional, a pesar de las numerosas vulnerabilidades que se habían descubierto y que eludían el Sandbox. [18] La versión estable actual (a 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 fue admitido hasta el 31 de diciembre de 2021 como soporte a largo plazo . [4] [5]

Compatibilidad con navegadores antiguos

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. [20] [21]

Angular y AngularDart

Las versiones posteriores de AngularJS se llaman simplemente Angular . [22] Angular es una reescritura incompatible de AngularJS basada en TypeScript . Angular 4 se anunció el 13 de diciembre de 2016, omitiendo 3 para evitar confusión debido a la desalineació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 de herencia única , definido por clases y orientado a objetos que utiliza 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 utilizó. 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 seguidos de 12 meses de soporte a largo plazo. Los lanzamientos principales son bianuales con 1 a 3 lanzamientos menores por cada lanzamiento principal. [27]

angulares universales

Una aplicación Angular normal se ejecuta en el navegador, mientras que Angular Universal genera páginas de aplicaciones estáticas en el servidor a través de la representación del lado del servidor (SSR). [28]

Bibliotecas

Material JS angular

AngularJS Material [29] [30] era una biblioteca de componentes de interfaz de usuario que implementaba Material Design en AngularJS. [31] La biblioteca proporcionó un conjunto de componentes de interfaz de usuario reutilizables, bien probados y accesibles . En enero de 2022, la biblioteca cerró, como se anunció en su sitio web oficial. [32] La biblioteca de materiales AngularJS 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 angular/material2 de GitHub.

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 para 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 GUI para depurar aplicaciones. [34] Durante un tiempo a finales de 2014 y principios de 2015, la extensión no fue compatible con versiones recientes (después de 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 verifica si hubo algún cambio en todas las variables observadas por todos los $scopes. Si $scope.myVarestá definido en un controlador y esta variable está marcada para observación, Angular monitoreará los cambios en myVar en cada iteración del bucle.

Este enfoque potencialmente condujo a una renderización lenta cuando AngularJS verificaba demasiadas variables en $scopecada ciclo. Miško Hevery sugirió mantener menos de 2.000 observadores en cualquier página. [14]

Ver 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 angular . Consultado el 9 de abril de 2021 .
  6. ^ Techson, Mark (2 de febrero de 2021). "Encontrar un camino a seguir con AngularJs". Medio . 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. ^ "Redacción de directivas". 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. ^ "Cinco funciones impresionantes 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/tecnología BRAT. 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. ^ "Lanzamiento 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 ser compatible con IE8. Lea más sobre esto en nuestro blog. AngularJS 1.2 seguirá siendo compatible con IE8, pero el equipo central no planea dedicar tiempo a abordar 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 13 de octubre de 2014 . Consultado el 12 de octubre de 2014 .
  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 13 de diciembre de 2016 . Consultado el 14 de diciembre de 2016 .
  24. ^ Fluin, Stephen (26 de abril de 2018). "La versión 5.0.0 de Angular ya está disponible". Medio . Consultado el 9 de abril de 2021 .
  25. ^ Krill, Paul (18 de septiembre de 2017). "El marco de JavaScript AngularJS 5 se retrasó". InfoMundo . 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 angular . Consultado el 8 de junio de 2018 .
  27. ^ "Versiones y lanzamientos angulares". angular.io . Consultado el 8 de junio de 2018 .
  28. ^ Pieszak, Mark (7 de enero de 2020). "Análisis profundo de renderizado del lado del servidor y universal angular". Medio . Consultado el 9 de abril de 2021 .
  29. ^ "angular/material (GitHub)". GitHub . Consultado el 24 de diciembre de 2020 .
  30. ^ "Documentación de materiales 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: UI Component Framework. Presione. pag. 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. ^ Vado, 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 rota".

Otras lecturas

enlaces externos