AngularJS es un marco web front-end de código abierto basado en JavaScript mantenido principalmente por Google y por una comunidad de individuos y corporaciones para abordar muchos de los desafíos encontrados en el desarrollo de aplicaciones de una sola página . Su objetivo es simplificar tanto el desarrollo como la prueba 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 .
Desarrollador (es) | |
---|---|
Versión inicial | 20 de octubre de 2010 [1] |
Lanzamiento estable | 1.8.2 [2] / 21 de octubre de 2020 |
Repositorio | Repositorio AngularJS |
Escrito en | JavaScript |
Plataforma | Motor de JavaScript |
Tamaño | 167 kB de producción 1,2 MB de desarrollo |
Tipo | Marco web |
Licencia | Licencia MIT |
Sitio web | angularjs |
AngularJS se utiliza como la interfaz de la pila MEAN , que consta de la base de datos MongoDB , el marco del servidor de aplicaciones web Express.js , el propio AngularJS (o Angular ) y el entorno de tiempo de ejecución del servidor Node.js.
El marco de AngularJS está en soporte a largo plazo ("LTS") hasta el 31 de diciembre de 2021. [3] [4] Después de esa fecha, Google ya no actualizará AngularJS para solucionar problemas de seguridad, compatibilidad del navegador o jQuery . [5] [4] 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 funciona leyendo primero la página del lenguaje de marcado de hipertexto (HTML), que tiene atributos HTML personalizados adicionales incrustados. Angular interpreta esos atributos como directivas para vincular partes de entrada o salida de la página a un modelo que está representado por variables estándar de JavaScript . Los valores de esas variables de JavaScript se pueden establecer manualmente dentro del código o se pueden recuperar de recursos JSON estáticos o dinámicos .
AngularJS se basa en la creencia de que la programación declarativa debe usarse 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 adapta y amplía el HTML tradicional para presentar contenido dinámico a través de un enlace de datos bidireccional que permite la sincronización automática de modelos y vistas. Como resultado, AngularJS resta 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 incluyen:
- para desacoplar la manipulación DOM de la lógica de la aplicación. La dificultad de esto se ve dramáticamente afectada por la forma en que está estructurado el código.
- para desacoplar el lado del cliente de una aplicación del lado del servidor. Esto permite que el trabajo de desarrollo avance en paralelo y permite la reutilización de ambos lados.
- para proporcionar estructura para el viaje de construcción de una aplicación: desde el diseño de la interfaz de usuario, pasando por la escritura de la lógica empresarial, hasta las pruebas.
AngularJS implementa el patrón MVC para separar la presentación, los datos y los componentes lógicos. [8] Utilizando la inyección de dependencias , Angular trae servicios tradicionalmente del lado del servidor , como controladores dependientes de la vista, a las aplicaciones web del lado del cliente. En consecuencia, se puede reducir gran parte de la carga sobre el servidor.
Alcance
AngularJS usa el término "alcance" de una manera similar a los fundamentos de la informática.
El alcance en ciencias de la computación describe cuándo en el programa es válida una vinculación particular . 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 todas las variables definidas en el alcance pueden ser accedidas tanto por la "Vista" como por el "Controlador". El osciloscopio se comporta como un pegamento y une la "Vista" y el "Controlador".
Oreja
La tarea realizada por el programa de arranque AngularJS ocurre en tres fases [11] después de que se ha cargado el DOM:
- Creación de un nuevo inyector
- Recopilación de las directivas que decoran el DOM
- Vinculación de todas las directivas al alcance
Las directivas AngularJS permiten al desarrollador especificar elementos y atributos similares a 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 son:
ng-animate
- Un módulo proporciona soporte para JavaScript, transición CSS3 y ganchos de animación de fotogramas clave CSS3 dentro de directivas personalizadas y centrales existentes.
Dado que los ng-*
atributos no son válidos en las especificaciones HTML, data-ng-*
también se pueden utilizar como prefijo. Por ejemplo, ambos ng-app
y data-ng-app
son válidos en AngularJS.
ng-app
- Declara el elemento raíz de una aplicación AngularJS, bajo la cual se pueden usar directivas para declarar enlaces y definir comportamiento.
ng-aria
- Un módulo para el soporte de accesibilidad de atributos ARIA comunes .
ng-bind
- Establece el texto de un elemento DOM en el valor de una expresión. Por ejemplo,
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, según el valor de una expresión booleana.
ng-controller
- Especifica una clase de controlador JavaScript que evalúa expresiones HTML.
ng-if
- Directiva de instrucción if básica que instancia el 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
Yng-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 de un conjunto de opciones, según el 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 especificados.
Enlace de datos bidireccional
El enlace de datos bidireccional de AngularJS es su característica más notable, aliviando en gran medida al servidor backend de las responsabilidades de creación de plantillas. En cambio, las plantillas se representan en HTML sin formato de acuerdo con los datos contenidos en un alcance definido en el modelo. El $scope
servicio en Angular detecta cambios en la sección del modelo y modifica las expresiones HTML en la vista a través de un controlador. Asimismo, cualquier alteración de la vista se refleja en el modelo. Esto evita la necesidad de manipular activamente el DOM y fomenta el arranque y la creación rápida de prototipos de aplicaciones web. [13] AngularJS detecta 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 activan oyentes cuando se cambian los valores del modelo. [14]
$watch
- es un método angular usado para cheques sucios. Cualquier variable o expresión asignada en $ scope configura automáticamente una $ watchExpression en angular. Asignar una variable a $ scope o directivas de uso como ng-if, ng-show, ng-repeat, etc., todos crean relojes en alcance angular automáticamente. Angular mantiene una matriz simple de $$ vigilantes en el $ objetos de alcance
- Diferentes formas de definir un observador en AngularJS.
- explícitamente $ ver un atributo en $ alcance .
$scope.$watch('person.username', validateUnique);
- coloque una interpolación en su plantilla (se creará un observador para usted en el $ scope actual).
- pregunte una directiva como ng-model para definir el observador por usted.
- explícitamente $ ver un atributo en $ alcance .
$digest
- es un método angular que se invoca internamente por angularjs en intervalos frecuentes. En $ método de digestión , iteraciones angulares sobre todo $ relojes en su ámbito / ámbitos secundarios.
$apply
- es un método angular que invoca internamente $ digest . Este método se usa cuando desea decirle a angular que comience manualmente la verificación sucia (ejecute todos $ relojes )
$destroy
- es un método y un evento en angularjs. $ destroy () , elimina un alcance y todos sus elementos secundarios de la verificación sucia. Angular llama al evento $ destroy siempre que se destruye un $ scope o $ controller.
Historia 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 de megabytes, para aplicaciones fáciles de hacer 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 una arquitectura de aplicación basada en componentes. [17] Este lanzamiento, entre otros, eliminó el Sandbox, que muchos desarrolladores creían que proporcionaba seguridad adicional, a pesar de las numerosas vulnerabilidades que se habían descubierto que pasaban por alto el Sandbox. [18] La versión estable actual (a marzo de 2020) de AngularJS es 1.7.9 [19]
En enero de 2018, se anunció un cronograma para la eliminación gradual de AngularJS: después de lanzar 1.7.0, el desarrollo activo en AngularJS continuará hasta el 30 de junio de 2018. Posteriormente, 1.7 será compatible hasta el 31 de diciembre de 2021 como soporte a largo plazo . [5] [4]
Soporte de navegador heredado
Las versiones 1.3 y posteriores de AngularJS no son compatibles con Internet Explorer 8 o anteriores. Si bien AngularJS 1.2 es compatible con IE8, su equipo no. [20] [21]
Angular y AngularDart
Las versiones posteriores de AngularJS simplemente se llaman Angular . Angular es una reescritura incompatible basada en TypeScript de AngularJS. Angular 4 se anunció el 13 de diciembre de 2016, omitiendo 3 para evitar una confusión debido a la desalineación de la versión del paquete del enrutador que ya se distribuyó como v3.3.0. [22]
AngularDart obras de dardo , que es un orientado a objetos , clase definida , herencia simple lenguaje de programación utilizando C estilo sintaxis , que es diferente de Angular JS (que utiliza JavaScript ) y Angular 2 / angular 4 (que utiliza Letra de imprenta ). 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. [23] Las mejoras clave en Angular 5 incluyen soporte para aplicaciones web progresivas, un optimizador de compilación y mejoras relacionadas con Material Design. [24] Angular 6 se lanzó el 3 de mayo de 2018, [25] 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 control de versiones semántico, y cada número de versión principal indica cambios potencialmente importantes . Angular se ha comprometido a proporcionar 6 meses de soporte activo para cada versión principal, seguidos de 12 meses de soporte a largo plazo. Los lanzamientos principales son semestrales con 1 a 3 lanzamientos menores para cada lanzamiento principal. [26]
Angular Universal
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). [27]
Bibliotecas
Material de AngularJS
AngularJS Material [28] [29] es una biblioteca de componentes de UI que implementa Material Design en AngularJS. [30] La biblioteca proporciona un conjunto de componentes de IU reutilizables, bien probados y accesibles .
Extensión de Chrome
En julio de 2012, el equipo de Angular creó una extensión para el navegador Google Chrome llamada Batarang, [31] que mejora la experiencia de depuración para aplicaciones web creadas con Angular. La extensión tiene como objetivo permitir una fácil detección de cuellos de botella en el rendimiento y ofrece una GUI para depurar aplicaciones. [32] Durante un tiempo durante finales de 2014 y principios de 2015, la extensión no fue compatible con versiones recientes (después de v1.2.x) de Angular. [33] La última actualización realizada a esta extensión fue el 4 de abril de 2017.
Actuación
AngularJS establece el paradigma de un ciclo de resumen . Este ciclo puede considerarse un bucle, durante el cual AngularJS verifica si hay algún cambio en todas las variables observadas por todos los $scopes
. Si $scope.myVar
se define en un controlador y esta variable se marcó para su observación, Angular supervisará los cambios en myVar en cada iteración de bucle.
Este enfoque conduce potencialmente a una representación lenta cuando AngularJS verifica demasiadas variables en $scope
cada ciclo. Miško Hevery sugiere mantener menos de 2000 espectadores en cualquier página. [14]
Ver también
- React.js
- Vue.js
- Polímero (biblioteca)
- Comparación de marcos de JavaScript
Referencias
- ^ "Lanzamientos · angular / angular.js" . GitHub . Consultado el 9 de abril de 2021 .
- ^ "Versión 1.8.2" . 21 de octubre de 2020 . Consultado el 6 de noviembre de 2020 .
- ^ "AngularJS" . docs.angularjs.org . Consultado el 14 de mayo de 2021 .
- ^ a b c Darwin, Pete Bacon (27 de julio de 2020). "AngularJS estable y soporte a largo plazo" . Blog angular . Consultado el 9 de abril de 2021 .
- ^ a b "AngularJS" . docs.angularjs.org . Consultado el 9 de abril de 2021 .
- ^ Techson, Mark (2 de febrero de 2021). "Encontrar un camino hacia adelante con AngularJs" . Medio . Consultado el 9 de abril de 2021 .
- ^ "¿Qué es Angular?" . Consultado el 12 de febrero de 2013 .
- ^ "AngularJS" . docs.angularjs.org . Consultado el 9 de abril de 2021 .
- ^ "ECMAScript 5.1 anotado, sección 10.2 entornos léxicos" . Consultado el 3 de enero de 2015 .
- ^ Barendregt, Henk; Barendsen, Erik (marzo de 2000), Introducción al cálculo Lambda (PDF)
- ^ "Redacción de directivas" . angularjs.org. 28 de noviembre de 2012 . Consultado el 21 de julio de 2013 .
- ^ "AngularJS" . docs.angularjs.org . Consultado el 9 de abril de 2021 .
- ^ "5 características impresionantes de AngularJS" . Consultado el 13 de febrero de 2013 .
- ^ a b Hevery, Misko. "Enlace de datos en angularjs" . Consultado el 9 de marzo de 2014 .
- ^ "Hola mundo, está aquí" . Consultado el 12 de octubre de 2014 .
- ^ a b "GetAngular" . Angular / BRAT Tech. LLC. Archivado desde el original el 13 de abril de 2010 . Consultado el 12 de octubre de 2014 .
- ^ "AngularJS: Guía del desarrollador para v1.5.8: Componentes" . Consultado el 26 de septiembre de 2017 .
- ^ "angular.js" . GitHub . Consultado el 26 de septiembre de 2017 .
- ^ "Lanzamiento v1.7.9 · angular / angular.js" . GitHub . Consultado el 9 de abril de 2021 .
- ^ "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 eliminado el soporte para IE8. Lea más sobre esto en nuestro blog. AngularJS 1.2 continuará admitiendo IE8, pero el equipo central no planea dedicar tiempo a abordar problemas específicos de IE8 o anteriores.
- ^ Minar, Igor. "AngularJS 1.3: se acerca una nueva versión" . Blog de AngularJS . Consultado el 12 de octubre de 2014 .
- ^ "Ok ... déjame explicarte: va a ser Angular 4.0" . angularjs.blogspot.kr . Consultado el 14 de diciembre de 2016 .
- ^ Fluin, Stephen (26 de abril de 2018). "Versión 5.0.0 de Angular ya disponible" . Medio . Consultado el 9 de abril de 2021 .
- ^ Krill, Paul (18 de septiembre de 2017). "Marco de JavaScript AngularJS 5 retrasado" . InfoWorld . Consultado el 9 de abril de 2021 .
- ^ Fluin, Stephen (3 de mayo de 2018). "Versión 6 de Angular ahora disponible - Blog de Angular" . Blog angular . Consultado el 8 de junio de 2018 .
- ^ "Versiones y lanzamientos angulares" . angular.io . Consultado el 8 de junio de 2018 .
- ^ Pieszak, Mark (7 de enero de 2020). "Profundización de renderizado angular universal y del lado del servidor" . Medio . Consultado el 9 de abril de 2021 .
- ^ "angular / material (GitHub)" . Consultado el 24 de diciembre de 2020 .
- ^ "Documentación de material de AngularJS" . Consultado el 24 de diciembre de 2020 .
- ^ Kotaru, V. Keerti (25 de agosto de 2016). Implementación de material design con AngularJS: UI Component Framework . Presione. pag. 4. ISBN 9781484221907.
- ^ "angular / angularjs-batarang (GitHub)" . Consultado el 12 de octubre de 2014 .
- ^ Ford, Brian. "Presentamos el AngularJS Batarang" . Blog de AngularJS . Consultado el 12 de octubre de 2014 .
- ^ "La extensión batarang Chrome para AngularJS parece rota" .
Otras lecturas
- Green, Brad; Seshadri, Shyam (22 de marzo de 2013). AngularJS (1ª ed.). O'Reilly Media . pag. 150. ISBN 978-1449344856.
- Kozlowski, Pawel; Darwin, Peter Bacon (23 de agosto de 2013). Dominar el desarrollo de aplicaciones web con AngularJS (1ª ed.). Packt Publishing . pag. 372. ISBN 978-1782161820.
- Ruebbelke, Lukas (1 de enero de 2015). AngularJS en acción (1ª ed.). Publicaciones Manning . pag. 325. ISBN 978-1617291333.
enlaces externos
- Página web oficial