AngularJS

AngularJS (también conocido como Angular 1 ) es un framework web gratuito y de código abierto basado en JavaScript, actualmente descontinuado , para el desarrollo de aplicaciones de una sola página . Su mantenimiento corrió principalmente a cargo de Google y una comunidad de particulares y empresas. Su objetivo era simplificar tanto el desarrollo como las pruebas de dichas aplicaciones, proporcionando un framework para arquitecturas de modelo-vista-controlador (MVC) y modelo-vista-modelo de vista (MVVM) del lado del cliente, junto con componentes de uso común en aplicaciones web y aplicaciones web progresivas .

AngularJS se utilizó como interfaz de usuario de la pila MEAN , que consistía en la base de datos MongoDB , el marco de trabajo 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 corregir problemas de seguridad, compatibilidad con navegadores o jQuery . ^{[ 3 ] [ 4 ] [ 5 ]} El equipo de Angular recomienda actualizar a Angular (v2+) como la mejor opción, pero también proporcionó otras alternativas. ^{[ 6 ]}

El framework AngularJS funcionaba leyendo primero la página en lenguaje de marcado de hipertexto (HTML), que contenía atributos HTML personalizados . Angular interpretaba estos atributos como directivas para vincular las partes de entrada o salida de la página a un modelo representado por variables JavaScript estándar . Los valores de estas variables JavaScript podían establecerse manualmente en el código o recuperarse de recursos JSON estáticos o dinámicos.

AngularJS se construyó sobre la base de que la programación declarativa debí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 de negocio de una aplicación . ^{[ 7 ]} El framework adaptó y extendió el HTML tradicional para presentar contenido dinámico a través del enlace de datos bidireccional que permitía la sincronización automática de modelos y vistas. Como resultado, AngularJS restó importancia a la manipulación explícita del Modelo de Objetos del Documento (DOM) con el objetivo de mejorar la capacidad de prueba y el rendimiento.

Los objetivos de diseño de AngularJS incluían:

• Separar la manipulación del DOM de la lógica de la aplicación. La dificultad de esto depende en gran medida de la estructura del código.
• Separar la parte del cliente de una aplicación de la parte del servidor. Esto permite que el desarrollo avance en paralelo y facilita la reutilización de ambos componentes.
• Proporcionar estructura al proceso de creación de una aplicación: desde el diseño de la interfaz de usuario, pasando por la escritura de la lógica de negocio, hasta las pruebas.

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 utilizaba el término "ámbito" de una manera similar a los fundamentos de la informática.

En informática, el ámbito describe cuándo en el programa una vinculación particular es válida. La especificación ECMA-262 define el ámbito como: un entorno léxico en el que se ejecuta un objeto Function 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 conforma el modelo, y tanto la vista como el controlador pueden acceder a todas las variables definidas en él. El ámbito actúa como un nexo de unión entre la vista y el controlador.

La tarea realizada por el arrancador de AngularJS se produjo en tres fases ^{[ 11 ]} después de que se cargara el DOM:

1. Creación de un nuevo inyector
2. Compilación de las directivas que decoran el DOM.
3. Vinculación de todas las directivas al alcance

Las directivas de AngularJS permitían al desarrollador especificar elementos y atributos personalizados y reutilizables similares a HTML que definen las vinculaciones de datos y el comportamiento de los componentes de presentación. Algunas de las directivas más utilizadas eran:

ng-animate

Un módulo proporciona soporte para JavaScript, transiciones CSS3 y ganchos de animación de fotogramas clave CSS3 dentro de las directivas principales 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 los 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 'name' dentro del elemento span. Cualquier cambio en la variable 'name' dentro del ámbito de la aplicación se refleja instantáneamente en el DOM.

ng-class

Aplicar una clase de forma condicional, dependiendo del valor de una expresión booleana.

ng-controller

Especifica una clase de controlador JavaScript que evalúa expresiones HTML.

ng-if

Directiva básica de sentencia condicional que instancia el siguiente elemento si se cumplen las condiciones. Si la condición es falsa, el elemento se elimina del DOM. Si es verdadera, se reinserta una copia del elemento compilado.

ng-init

Se llama una sola vez cuando se inicializa el elemento.

ng-model

Similar a ng-bind, pero establece un enlace de datos bidireccional entre la vista y el ámbito.

ng-model-options

Permite ajustar cómo se realizan las actualizaciones del modelo.

ng-repeat

Instancie un elemento una vez por cada elemento de una colección.

ng-show&ng-hide

Muestra u oculta un elemento de forma condicional, según el valor de una expresión booleana. Esto se logra configurando el estilo de visualización CSS.

ng-switch

Instanciar condicionalmente una plantilla a partir 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 los controladores especificados.

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

La vinculación de datos bidireccional de AngularJS tenía su característica más notable: liberaba en gran medida al backend del servidor de las responsabilidades de las plantillas. En su lugar, las plantillas se renderizaban en HTML simple según los datos contenidos en un ámbito definido en el modelo. El $scopeservicio en Angular detectaba los cambios en la sección del modelo y modificaba las expresiones HTML en la vista a través de un controlador. Del mismo modo, 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 los cambios en los modelos comparando los valores actuales con los valores almacenados anteriormente en un proceso de verificación de cambios, a diferencia de Ember.js y Backbone.js que activaban los detectores cuando cambiaban los valores del modelo. ^{[ 14 ]}

$watch

es un método de Angular utilizado para la comprobación de cambios. 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 observadores en el ámbito de Angular. Angular mantiene un array simple de $$watchers en los objetos $scope.

Diferentes formas de definir un observador en AngularJS.

• Observa explícitamente un atributo en $scope .

  $scope.$watch('person.username', validateUnique);

• Coloca una interpolación en tu plantilla (se creará un observador para ti en el $scope actual).
• Pídele a una directiva como ng-model que defina el observador por ti.

  <input ng-model="person.username" />

$digest

Es un método de Angular que AngularJS invoca internamente a intervalos frecuentes. En el método $digest , Angular itera sobre todos los $watches en su ámbito/ámbitos secundarios.

$apply

es un método de Angular que invoca internamente a $digest . Este método se utiliza cuando se desea indicarle a Angular que inicie manualmente la comprobación de cambios (ejecutar todos los $watches ).

$destroy

En AngularJS, `$destroy()` es tanto un método como un evento. El método `$destroy() ` elimina un ámbito y todos sus elementos secundarios de la comprobación de cambios. Angular invoca el evento `$destroy` cada vez que se destruye un `$scope` o un `$controller`.

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 se habría cotizado por megabyte, para aplicaciones empresariales fáciles de crear. Este proyecto estaba ubicado en el dominio web "GetAngular.com" ^{[ 16 ]} y tenía algunos suscriptores, antes de que ambos decidieran abandonar la idea de negocio y lanzar Angular como una biblioteca de código abierto.

La versión 1.6 añadió 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, eliminó el Sandbox, que muchos desarrolladores creían que proporcionaba seguridad adicional, a pesar de las numerosas vulnerabilidades descubiertas que eludían el sandbox. ^{[ 18 ]} La versión estable actual (a noviembre de 2023) de AngularJS es la 1.8.3 ^{[ 19 ]}

En enero de 2018, se anunció un cronograma para la eliminación gradual de AngularJS: después del lanzamiento de la versión 1.7.0, el desarrollo activo de AngularJS continuaría hasta el 30 de junio de 2018. Posteriormente, la versión 1.7 recibió soporte hasta el 31 de diciembre de 2021 como soporte a largo plazo . ^{[ 4 ] [ 5 ]}

En julio de 2012, el equipo de Angular creó una extensión para el navegador Google Chrome llamada Batarang, ^{[ 33 ]} que mejoraba la experiencia de depuración para aplicaciones web creadas con Angular. La extensión tenía como objetivo permitir la detección sencilla de cuellos de botella de 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 de esta extensión se realizó el 4 de abril de 2017. Además, la extensión se eliminó de la Chrome Web Store el 1 de junio de 2022, debido a la falta de actualizaciones y posibles problemas de seguridad, como la necesidad de permisos confidenciales.

AngularJS estableció el paradigma de un ciclo de digestión . Este ciclo podría considerarse un bucle, durante el cual AngularJS verifica si hubo algún cambio en todas las variables monitoreadas por todos los controladores $scopes. Si $scope.myVarse define en un controlador y esta variable se marca para ser monitoreada, Angular monitoreará los cambios en myVar en cada iteración del bucle.

Este enfoque podía provocar una renderización lenta cuando AngularJS comprobaba demasiadas variables en $scopecada ciclo. Miško Hevery sugirió mantener menos de 2000 observadores en cualquier página. ^{[ 14 ]}

• React.js
• Vue.js
• Polímero (biblioteca)
• Comparación de frameworks de JavaScript
• Mecanografiado

• Sitio web oficial
• Honeypot (04/02/2025). Angular: El documental | Una historia de origen . Recuperado el 05/02/2025 a través de YouTube.