Ownership

Frameworks JS: AngularJS

En la actualidad, uno de los frameworks más potentes para realizar aplicaciones SPA (single-page application) es el AngularJS. Se trata de un código abierto, desarrollado por Google, para construir aplicaciones web dinámicas de forma sencilla.

La carga de datos se realiza de manera dinámica haciendo llamadas asíncronas al servidor y manteniendo una única página sin tener que cargar continuamente el contenido del navegador, lo que permite mantener completamente separadas la parte front y back de nuestra aplicación. AngularJS facilita “herramientas” para trabajar con los elementos de una web de una forma más sencilla y óptima que los clásicos lenguajes de JS, sin tener que crear complejos ficheros y enrevesadas conexiones entre ellos.

Antes de comenzar a programar con AngularJS es importante tener ciertos conocimientos de HTML, Javascript y CSS. La mayoría de los conceptos básicos (directivas, expresiones, módulos) se complementan y apoyan en estos lenguajes de programación. Es cierto que, aunque su curva de aprendizaje es pronunciada en versiones anteriores, con las nuevas se suaviza bastante. Al ser distribuido como un archivo de JavaScript se puede añadir directamente el framework desde las etiquetas de <script> al inicio de nuestro HTML

<html lang="es-ES">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
<body>
<!-- Resto código de nuestra aplicación -->
</body>
</html>

El resto del código que se desarrolle, como cualquier fichero de JS, se puede incluir directamente dentro del HTML o crear un archivo diferente en el que programaremos toda la parte de AngularJS y luego lo referenciaremos con las etiquetas <script> en el archivo principal.

AngularJS extiende los atributos de HTML con directivas y vincula los datos de HTML con expresiones, de forma que la directiva ng-app define una aplicación de AngularJS. La directiva ng-model vincula el valor de los controles HTML (input, select, textarea) a los datos de la aplicación y la directiva ng-bind vincula los datos de la aplicación a la vista HTML. 

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Nombre: <input type="text" ng-model="nombre"></p>
  <p ng-bind="nombre"></p>
</div>
</body>
</html>

En este ejemplo, AngularJS se carga automáticamente al iniciar la llamada a la página. Una vez cargada le estamos diciendo que la directiva ng-model vincula el valor del campo de entrada al nombre de la variable de la aplicación –nombre en nuestro caso- y que la directiva ng-bind vincula el contenido del elemento <p> al nombre de la variable de la aplicación definido anteriormente. Por último, la directiva ng-app traslada a AngularJS que el elemento <div> es el “dueño” de una aplicación AngularJS y que lo trate como tal. El resultado en pantalla sería un campo de entrada que dinámicamente nos actualiza el elemento <p> con el texto que introduzcamos en el campo nombre, sin necesidad de recargar la página para ver el contenido final. 

La directiva ng-init sirve para inicializar variables en AngularJS, aunque normalmente se suelen definir en módulos. Los módulos son una especie de funciones más avanzadas que dividen a la aplicación de AngularJS en varias partes. 

<div ng-app="" ng-init="Nombre='Juan'">

Las expressions son la forma que tiene AngularJS de unir los datos a nuestro HTML. Se puede escribir dentro de llaves dobles {{expression}} o dentro de una directiva ng-bind = “expression”. De esta forma, AngularJS resolverá la expresión y devolverá el resultado exactamente donde la hayamos escrito. Las expressions se pueden utilizar en bucles, condiciones, filtros o directamente en nuestro HTML. Además, en AngularJS, las expresiones, los números, las cadenas, los objetos y los vectores son tratados como los de JavaScript clásico, lo que facilita bastante su aprendizaje.

<div ng-app="">
  <p>Mi primera expresión: {{ 5 + 5 }}</p>  <!--Resultado: Mi primera expresión: 10 -->
</div>


De la siguiente forma definimos una aplicación en la que crearemos un módulo, con la función angular.module, para poder añadir controladores, directivas o filtros.

<div ng-app="myApp">...
</div>
<script>
var app = angular.module("myApp", []);
</script>

El parámetro “myApp” se refiere a un elemento HTML en el que se ejecutará la aplicación. Por último, para crear un controlador, que gestionará el flujo de la parte de cliente, utilizaremos la directiva ng-controller y lo definiremos en nuestro código JavaScript.

<div ng-app="myApp" ng-controller="controlador">
{{ nombre + " " + apellido }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("controlador", function($scope) {
  $scope.nombre = "Juan";
  $scope.apellido = "Díaz";
});
</script>
Como hemos visto, AngularJS se presenta de una forma muy sencilla e intuitiva. Además, cuenta con una comunidad de desarrolladores muy grande que puede resolver cualquier duda y que proporciona cientos de ejemplos. Sin duda, este framework es uno de los más populares y demandado por las empresas debido a su proyección de futuro y al respaldo del mismísimo Google. Una apuesta segura.