Uno de los framework de desarrollo JavaScript más potentes y conocidos en la actualidad junto con ReactJS. Si eres desarrollador web estamos seguros que has trabajado con él en algún proyecto pues es la respuesta para todos aquellos que quieran un desarrollo que consolide JavaScript, HTML y CSS con comodidad permitiendo ensamblar aplicaciones de una forma intuitiva en una sola página (SPA) como ninguna otra.
En el mundo actual JavaScript es muy popular, pero uno de los grandes problemas del sector es que hay tantos cambios y tan frecuentes, que todo el mundo acaba "quemado" solo tratando de seguir el ritmo de las novedades. Por citar un ejemplo, en todo este tiempo alguna de las bibliotecas JavaScript más importantes han tenido ya una gran cantidad de cambios desde su aparición hasta que se hicieron estables. La consecuencia, parte del código desarrollado en ese tiempo ya no vale para nada y hay que actualizarlo. AngularJS no viene a resolver esto ni a reinventar la rueda pero sí para poner las cosas mucho más fáciles a todos.
AngularJS, es un framework de JavaScript de código abierto, mantenido por Google. Podría parecerse a cualquier otro framework MVC (Modelo Vista Controlador) moderno pero dado su enfoque y al usar un patrón MVVM (Model-View View-Model) separar la lógica de aplicación de la de diseño pero manteniendo ambas conectadas (data binding) es una tarea sumamente sencilla. La capa lógica no sabe lo que ocurre en la capa visual pero mantiene todo el control sobre el DOM (el cuerpo de la web) y nos permite actualizar su contenido como queramos.
Dicho de otra manera, si con jQuery ya podíamos hacer filigranas con Angular podemos además comunicarnos con el servidor, recuperar datos, gestionar estas llamadas y mostrar el resultado en la vista. Todo esto y más en un entorno web.
AngularJS integra una solución completa frente a otras opciones como jQuery, Knockout, Handlebars o PagerJs —librerías orientadas a resolver un problema concreto, pero no proporcionan una solución global para desarrollar aplicaciones— que nos permite prescindir del vetusto PHP en nuestros desarrollos usando una tecnología moderna, solvente y con frecuentes revisiones, con la que podemos habilitar servicios web y desarrollar nuestros proyectos con una conexión con servidor dinámica mediante databinding, organizar sus componentes en módulos y modificar el DOM sin tener que remover de forma extrema el fichero HTML y el patrón MVVM.
AngularJS extiende HTML añadiendo funcionalidad y permite crear plantillas dinámicas poderosas. Implementa binding de datos de dos vías, conectando tu HTML (vistas) a los objetos de JavaScript (modelos) sin problemas. También permite generar componentes reusables abstrayendo toda la lógica de manipulación del DOM de modo que cualquier actualización en su modelo se reflejará inmediatamente en la vista, sin necesidad de ningún tipo de manipulación DOM o el control de eventos (por ejemplo, con jQuery).
Como ves AngularJS ofrece una gran cantidad de ventajas aunque quizá si acabas de aterrizar a este mundillo o simplemente estás aquí por curiosidad igual te he liado un poco. Lo mejor es que te enumere las principales ventajas de desarrollar en AngularJS y no en JavaScript.
La mejor manera de ver el poder de una aplicación AngularJS es crear su primer programa básico “Hello World”. Una forma sencilla de familiarizarnos con este Framework mientras vamos aprendiendo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf 8">
<title>Hola Mundo</title>
</head>
<body ng-app="app">
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.7.9/angular.js"></script>
<script>
angular.module("app", []).controller("HelloWorldCtrl", function($scope) {
$scope.message="Hola Mundo”
} )
</script>
</body>
</html>
Ya por último la variable “message”, a la que asignaremos como valor la cadena de texto “Hola Mundo” y adjuntando la variable miembro al objeto $scope.
Visto el ejemplo anterior, vamos ahora con un ejemplo un poco más avanzado. En este caso una sencilla calculadora. Para hacer más fácil la lectura del código lo vamos a separar en dos ficheros.
En esta capa añadiremos un formulario sencillo de dos campo donde introduciremos los valores a operar y un desplegable para seleccionar el tipo de operación.
<script src= "https://code.angularjs.org/1.7.9/angular.js"></script>
<script src= "calculadora.js"></script>
<div ng-app="CalculatorApp" ng-controller="CalculatorController">
<p><input type="number" ng-model="a"></p>
<p><input type="number" ng-model="b"></p>
<p><select ng-model="operator">
<option>+</option>
<option>*</option>
<option>-</option>
<option>/</option>
</select></p>
<p>{{ result() }}</p>
</div>
En este archivo reside la lógica de nuestro programa. Dependiendo de la opción elegida la aplicación devolverá el resultado de una operación. El código es muy sencillo y no necesita grandes explicaciones.
angular.module('CalculatorApp', [])
.controller('CalculatorController', function($scope) {
$scope.result = function() {
if ($scope.operator == '+') {
return $scope.a + $scope.b;
}
if ($scope.operator == '-') {
return $scope.a - $scope.b;
}
if ($scope.operator == '*') {
return $scope.a * $scope.b;
}
if ($scope.operator == '/') {
return $scope.a / $scope.b;
}
};
});
AngularJS sigue evolucionando y se posiciona cada vez más como uno de los lenguajes más demandados por las empresas. Una de sus principales ventajas reside en que si ya conoces Java o si eres un maestro del Kung-Fu en JavaScript no te costará adaptarte. El 90% del código te sonará y si tienes alguna duda siempre puedes consultar en la web gracias a su comunidad de usuarios y gran cantidad de documentación.
Ya por último, tanto si eres un profesional como si eres un aficionado que arranca en el desarrollo de aplicaciones móviles encontrarás en AngularJS un buen punto de inicio para crear tus propias aplicaciones rápidamente gracias a su curva de aprendizaje mínima.