AngularJS fue creado en 2009 por Miško Hevera, un desarrollador que trabaja en Google. Si bien inicialmente fue un proyecto favorito semi-independiente, el éxito de la creación de Hevery finalmente le aseguró a AngularJS un papel importante para la empresa, ya que Google se hizo cargo rápidamente del desarrollo y mantenimiento de AngularJS.
En 2014, Google anunció una nueva versión de AngularJS, originalmente llamada Angular 2.0, y luego acortó el nombre a Angular. Reescribiendo por completo el AngularJS original, Angular agregó muchas funciones nuevas, amplió las capacidades existentes y realizó cambios importantes en AngularJS, como cambiar la sintaxis de las expresiones. El término Angular ahora se usa para referirse a la versión 2+, mientras que el antiguo apodo AngularJS se refiere a las versiones originales 1.0.
A partir del 1 de enero de 2022, Google dejó de publicar actualizaciones del AngularJS original, lo que alentó a los desarrolladores a adoptar el AngularJS más nuevo, que Google aún mantiene y actualiza activamente.
En esta publicación, explicaremos qué es AngularJS, qué puede hacer con él y daremos ejemplos de sitios web que se ejecutan en AngularJS.
¿Qué es AngularJS?
AngularJS es un marco de JavaScript diseñado para extender la sintaxis HTML. AngularJS permite a los desarrolladores crear aplicaciones web enriquecidas (RIA) más fácilmente.
Mientras que muchos marcos de JavaScript se enfocan en extender JavaScript, AngularJS proporciona métodos para mejorar HTML. AngularJS extiende HTML más allá del simple marcado. Al agregar funciones como el enlace de datos, AngularJS permite a los desarrolladores evitar las soluciones alternativas complejas que tradicionalmente son necesarias cuando se trata de crear aplicaciones web receptivas con interfaces HTML.
¿Qué puedes hacer con AngularJS?
Para comprender los beneficios de usar AngularJS o Angular, primero debemos ver lo que HTML puede y jerga hacer.
HTML se diseñó originalmente como un lenguaje de marcado estático. Permite a los desarrolladores estilizar la apariencia de los documentos que se muestran en un navegador web. En los primeros días de la web, los sitios web eran en gran parte estáticos y ofrecían poca interactividad. Los desarrolladores etiquetaron sus documentos con HTML para crear una presentación única que sería igual para todos los usuarios.
A medida que la tecnología evolucionó y las páginas web se volvieron más interactivas, la naturaleza de HTML requirió que los desarrolladores usaran técnicas inteligentes para crear experiencias web interactivas que no estuvieran vinculadas a la naturaleza estática de HTML. A menudo, esto significó la inclusión de código JavaScript y tecnologías como jQuery y AJAX, que permitieron que las aplicaciones hicieran cambios en las páginas web sin recargar la página.
Introduciendo JavaScript en el lado del cliente
La nueva era de las aplicaciones web interactivas comenzó con la adición del código JavaScript del lado del cliente que se ejecutaba en el navegador web del usuario y enviaba información entre el navegador y el backend del sitio. Esto significó usar JavaScript para comunicarse con un servidor web y actualizar el modelo de objeto de documento (DOM) del navegador para cambiar los elementos HTML que se muestran en el navegador web del navegador.
Las primeras aplicaciones web interactivas dependían en gran medida de varias soluciones de JavaScript que actuaban como intermediarios entre la capa de presentación y el modelo subyacente. En un esfuerzo por superar esta barrera, se desarrolló AngularJS para permitir que los datos se vinculen directamente a la presentación. Este enfoque, conocido como enlace de datos bidireccional, garantiza la sincronización entre el modelo subyacente y la presentación que se muestra al navegador. Es parte del marco de modelo-vista-controlador (MVC) de AngularJS que separa la interfaz de usuario de la lógica de la aplicación, creando tres capas distintas dentro de la aplicación.
Experiencias interactivas con AngularJS
Al vincular datos, las aplicaciones pueden crear experiencias interactivas en las que la presentación se actualiza activamente en respuesta a cualquier cambio fundamental en el modelo. Esto permite que las aplicaciones se actualicen dinámicamente sin tener que recargar la página. Por ejemplo, si un usuario hace clic en un elemento de la página para actualizar un valor específico en el modelo subyacente, AngularJS sincroniza estos cambios entre la presentación que se muestra en el navegador mientras actualiza los datos subyacentes en el modelo, creando una página web con capacidades muy más allá del HTML estático tradicional.
Una aplicación de página única (SPA) es una aplicación web que puede realizar todas sus funciones sin recargar el sitio web. Los SPA se han convertido en el estándar para los sitios web interactivos y son la base de la Internet moderna. AngularJS es una tecnología clave que impulsa la creación de SPA, y sus capacidades de enlace de datos bidireccional están a la vanguardia de estas posibilidades.
Trabajar con enlace de datos bidireccional AngularJS
Echemos un vistazo al código simple que demuestra las funciones de enlace de datos bidireccionales disponibles en AngularJS.
Imagina que tenemos una aplicación que pregunta al usuario su ubicación y automáticamente actualiza el HTML del sitio web para mostrar la ubicación ingresada por el usuario. Si solo usáramos HTML, sería necesario que ingresáramos la entrada del usuario a través de un formulario, enviáramos el formulario y luego volviéramos a cargar la página para ver la ubicación ingresada.
Con AngularJS, podemos actualizar activamente la página a medida que el usuario escribe para crear una experiencia interactiva en tiempo real. Veamos el código:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body><div ng-app="TestApp" ng-controller="locationTest">
Location: <input ng-model="location"><br />
Current Location:
</div>
<script>
var app = angular.module('TestApp', []);
app.controller('locationTest', function($scope) {
$scope.location = "Phoenix, Arizona";
});
</script>
</body>
</html>
Dado que AngularJS extiende la sintaxis HTML, comenzamos definiendo un elemento normal
- aplicación ng – Define nuestra aplicación AngularJS y le da un nombre.
- modelo ng – Utiliza el enlace de datos bidireccional para vincular el valor del campo de entrada a la variable $ scope.location definida en el código.
Después de cargar la página, vemos el valor de la nuestra Ubicación entrada y Su ubicación actual ambos campos dicen «Phoenix, Arizona». Esta es la ubicación que definimos en el código JavaScript.
Pero después de cambiar el valor en el campo de entrada, Actual Ubicación el campo se actualiza activamente cuando ingresamos una nueva ubicación.
Esto ilustra el principio del enlace de datos bidireccional. La «ubicación» del modelo siempre tendrá el mismo valor, tanto en la presentación de nuestro navegador como en nuestro modelo base.
En este ejemplo, solo cambiamos la ubicación mediante el formulario de entrada, pero si quisiéramos actualizar la visualización en función de los datos de otra fuente, podemos cambiar la variable directamente desde el interior del código JavaScript. Esto nos permite un verdadero enlace de datos bidireccional para que la presentación del sitio web pueda actualizarse mediante la entrada desde el frontend o backend. Esto permite la creación de aplicaciones web interactivas que reciben información del usuario y de fuentes del lado del servidor para crear un entorno consistente que no requiere recargar la página.
AngularJS en comparación con otros marcos
AngularJS no está solo en el marco de JavaScript front-end. Si bien algunas alternativas, como Vue.js y React, se presentan como soluciones más modernas o simplistas, el control preciso y las amplias capacidades de AngularJS han asegurado que el marco siga siendo popular. Esto es especialmente cierto para las aplicaciones empresariales que requieren una gran carga de trabajo, así como para los desarrolladores experimentados que requieren algunas de las capacidades avanzadas que ofrece AngularJS.
Si bien hay muchas similitudes y superposiciones en estas estructuras, existen algunas diferencias clave. React no incluye el enlace de datos bidireccional de forma predeterminada y, a menudo, se complementa con otra tecnología conocida como Redux para agregar estas características. React también se enfoca en el modelo Virtual DOM, a diferencia del modelo MVC AngularJS.
Del mismo modo, Vue también usa Virtual DOM con su estructura modelo-vista-modelo de vista (MVVM) que agrega otra capa para manejar la lógica de la interfaz de usuario.
Ejemplos de AngularJS
Hay muchos sitios web muy populares que dependen de AngularJS. Aquí hay unos ejemplos:
1. upwork
Es una plataforma popular para autónomos y empleadores que utiliza AngularJS para crear una experiencia SPA interactiva para muchas de sus funciones clave.
2. T-Mobile
Como uno de los principales proveedores de telefonía celular, T-Mobile utiliza AngularJS en su sitio web principal.
3. Escolar
La editorial internacional Scholastic utiliza AngularJS para actualizar dinámicamente su sitio web con contenido nuevo y brindar una experiencia interactiva.
Echa un vistazo a otros 50 ejemplos en este video a continuación:
Vea lo que AngularJS puede agregar a sus proyectos
A pesar de ser uno de los marcos front-end de JavaScript más antiguos que todavía se usan, AngularJS sigue siendo una solución de desarrollo web poderosa y eficiente. Al permitir que los desarrolladores agreguen rápidamente capacidades interactivas y aprovechen las potentes capacidades de enlace de datos bidireccional, AngularJS sigue siendo adecuado para cualquier desarrollador interesado en crear aplicaciones web y SPA interactivas.
¿Interesado en construir un SPA interactivo? ¿O tal vez solo desea agregar un poco de estilo a sus aplicaciones web? Sumérjase en AngularJS y vea lo que puede construir.
