angular con dinosaurios 1: introducción

Qué es angular.js y una primera estructura básica.

De Kooning

archivado en: JavaScript / 26 septiembre, 2014 / taller:

Hace un par de meses escribí una introducción ligera a angular, pero este framework tan interesante bien merece un tratamiento en profundidad y, por supuesto, sembrado de ejemplos con dinosaurios. El nivel será una miajita más alto del que suelo mantener en este blog, pero doy por sentado que si alguien necesita trabajar con Angular tiene ya conocimientos sólidos en javaScript.

Angular es un framework MVC de código abierto que desarrollaron Miško Hevery y Adam Abrons en 2009 y que actualmente está mantenido por Google, lo cual es garantía de calidad y perdurabilidad. Es muy útil para desarrollar Single Page Applications (SPA), esto es, aplicaciones web donde todo sucede en una sola página, como las que se pueden desarrollar en cordova para dispositivos móviles. Es muy cómodo para aplicaciones donde abundan las operaciones CRUD, aunque quizás se queda corto en las que el peso recae en la manipulación del DOM, tal y como explican en su Developer Guide:

Games and GUI editors are examples of applications with intensive and tricky DOM manipulation. These kinds of apps are different from CRUD apps, and as a result are probably not a good fit for Angular. In these cases it may be better to use a library with a lower level of abstraction, such as jQuery.

Echemos ahora un vistazo por encima a la estructura básica de una aplicación angular, anticipando algunos conceptos que veremos en profundidad en las siguientes entradas. Para una introducción más detallada, véase introducción a angular I, II y III.

Estructura básica

Un proyecto angular consta de tres grandes partes: las vistas (views), que son el código html que visualiza y con las que interactúa el usuario; los módulos (modules), donde se encuentra la información en bruto, por decirlo de alguna manera, así como la definición de diversas funcionalidades opcionales; y los controladores (controllers), una serie de funciones que sirven para «dirigir» la aplicación, es decir, para gestionar las vistas y la comunicación con el modelo.

Una vista no es más que una página html en la que se incluyen una especie de atributos en los tags denominados directivas, que se caracterizan por ir precedidas por ng-algo. Hay varios tipos de directivas, como ng-repeat que sirve para renderizar código html a partir de un JSON o ng-click, con la que se lanzan acciones.

Con la directiva ng-app indicamos que el código html que comprende ese tag será tratado por angular y aquí podemos definir el nombre del módulo con el que estará asociado ese fragmento. Podemos incluir tantas ng-app como necesitemos, por lo general, una por cada sección independiente de la aplicación. Esto se entiende bien con un ejemplo. Preparamos una estructura parecida a esta (y ya veremos más adelante cuál es la más apropiada para una aplicación grande y cómo armarla con yeoman).

index.html

js/app.js

js/controllers.js

js/vendor/angular.min.js <- se puede bajar desde aquí.

En index.html ponemos algo similar a esto:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Angular con dinosaurios</title>

</head>

<body>

<section ng-app="miAplicacion">

<p>El Triceratops vivió a finales del Cretácico.</p>

</section>

<!-- Enlazamos angular en el footer para que no se detenga la carga inicial y el usuario vea enseguida algo -->

<script src="js/vendor/angular.min.js"></script>

<!-- Enlazamos el  módulo principal -->

<script src="js/app.js"></script>

<!-- Enlazamos el los controladores de ese módulo -->

<script src="js/controllers.js"></script>

</body>

</html>

Ahora, en app.js definimos el módulo con el método angular.module, que recibe dos parámetros, la referencia que usamos en la directiva ng-app y un array, de momento vacío, en el que se inyectan sus dependencias, que ya veremos qué significa.

var miModulo = angular.module('miAplicacion', []);

Por último, en controllers.js definimos un primer controlador pasándole dos parámetros, el nombre y una función, en la que a su vez pasamos el parámetro $scope.

miModulo.controller("miControlador", function($scope) {

// Aquí irá la lógica de este controlador.

});

Como vemos, al definir el controlador mediante la notación de puntos anteponiendo el nombre del módulo, en realidad estamos definiendo un «método» de este objeto. Es decir, que lo anterior equivaldría a esto:

var miModulo = angular.module('miAplicacion', []).controller("miControlador", function($scope) {

// Aquí irá la lógica de este controlador.

});

Pero de la primera manera queda mucho más limpio y manejable.

Ahora que tenemos enlazadas las tres partes podemos asociar un fragmento de la vista con el controlador mediante la directiva ng-controller.

<p ng-controller="miControlador">

El Triceratops vivió a finales del Cretácico.

</p>

De esta manera, estamos indicando a angular que todo el contenido comprendido en el tag en el que hemos definido el controlador está sujeto, es decir, bajo observación, de ese controlador. Y el puente, el carril por el que se comunicarán el controlador y la vista, es el $scope, un objeto que podemos traducir como «alcance». Así, en la vista podemos incluir elementos dinámicos mediante un sistema de plantillas similar al moustache.js, con pares de llaves dobles ({{ ... }}) definidos en el controlador correspondiente. Con código queda más claro el galimatías anterior. En vez de incluir la cadena de texto «El Triceratops vivió a finales del Cretácico» en la vista, la definimos en el controlador asociada a la vista como propiedad del $scope y la declaramos ahí entre llaves:

miModulo.controller("miControlador", function($scope) {

$scope.texto = "El Triceratops vivió a finales del Cretácico.";

});

...

<p ng-controller="miControlador">

{{ texto }}

</p>

ver demo en plunker

Otra manera

Tal y como explican Miguel Ángel Álvarez y Álberto Basalo en un artículo muy bueno, los módulos y controladores también se pueden definir y relacionar mediante otra sintaxis menos intuitiva, pero más apropiada para proyectos grandes y es la siguiente. En lugar de «guardar» el módulo en una variable, sencillamente lo declaramos:

angular.module('miAplicacion', []);

Y luego para utilizarlo se invoca sin el segundo parámetro (la inyección de dependencias).

angular.module('miAplicacion')

.controller("miControlador", function($scope) {

});

Bueno, de momento vamos a dejarlo aquí.

|| Tags: , , ,

valoración de los lectores sobre angular con dinosaurios 1: introducción

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • estrellica valoración negativa
  • 3 sobre 5 (3 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.