¿Qué es AngularJS? Conceptos básicos y primeros pasos

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.

¿Qué es AngularJS?

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.

¿Qué ventajas ofrece AngularJS?

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.

  • Puedes usar TypeScript pero no es obligatorio: Tanto si eres un desarrollador old school como si prefieres trabajar con un estilo propio, Angular no te obliga a escribir tu código usando TypeScript pero es una práctica que recomendamos. ¿Por qué complicarse? ¿Si algo funciona no es mejor no tocarlo? Puede ser. Si vienes del mundo de Java quizá te guste más trabajar en ECMAScript pero debo recordar que existen diferentes versiones y cada versión ofrece varias formas diferentes de declarar un objeto, lo cual puede confundirnos.Esto genera un serio problema de inconsistencia. Al usar TypeScript no tenemos este problema. TypeScript evita la confusión y ofrece un mantenimiento más fácil de las aplicaciones.
  • No hace complicado aquello que debe ser fácil: AngularJS es un framework y no una biblioteca por lo que incluye muchas más opciones y funcionalidades de serie. Esto supone un importante ahorro de recursos y permite a empresas reducir sus tiempos de producción.
  • Componentes web. Reutilizar nuestro código supone una enorme ventaja. Angular adopta el estándar de los componentes web. Un conjunto de APIs que permiten crear nuevas etiquetas HTML personalizables y reutilizables que podemos utilizar en otros proyectos con independencia del navegador que utilicemos. ¿Y qué beneficio nos ofrece esto? ¡Más tiempo libre!
  • Es open source. No vamos a profundizar mucho sobre sus bondades pero en la actualidad el código abierto es clave en el desarrollo de la nueva economía colaborativa. Gracias al software de fuentes abiertas es posible que otras personas aprenden a partir de nuestro código, aporten soluciones o desarrollen las suyas a partir de las aportaciones de otros.
  • Buen soporte y una enorme cantidad de recursos disponibles. A diferencia de otros lenguajes podemos usar desde el bloc de notas a los principales editores e IDEs para trabajar con este framework. Podemos desarrollar nuestra aplicación desde cero o a partir de un aplantilla. Al almacenar por separado el código de la capa lógica y de presentación podemos sacar partido y editar este código con elIDE que mejor nos convenga. Pero lo mejor es su comunidad de usuarios y desarrolladores. Siempre volcados en ayudar, resulta muy fácil encontrar respuestas a nuestras consultas. Y si todavía nos quedan dudas podemos consultar la excelente documentación disponible.

Hola Mundo con AngularJS

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>
Explicación del código:
  • “ng-app” actúa como palabra clave se utiliza para destacar que esta aplicación debe considerarse como una aplicación AngularJS.
  • “ng-controller” se utiliza como controlador para mantener la lógica de aplicación. En este ejemplo para la etiqueta H1, lo que queremos es acceder al controlador que tendrá la lógica para mostrar “Hola Mundo”.
  • “message” es una variable que no es más que un marcador donde se mostrará el mensaje “Hola Mundo”
  • En nuestro script crearemos una “función” que será invocada cuando nuestro código llame a este controlador. El objeto $scope es un objeto especial en AngularJS que es un objeto global utilizado dentro de Angular.js. El objeto $scope se utiliza para administrar los datos entre el controlador y la vista.

     

    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.

Creando una calculadora con AngularJS

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.

 

HTML (calculator.html)

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>

 

JavaScript (calculadora.js)

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;
            }
        };
    });

Conclusiones

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.