LIBRERIA ANGULAR. PARTE 1. CONTROLANDO Y DIRIGIENDO

<script src=”my own” title=”parte 1. controlando y dirigiendo”>

¡Puf! como está de fuerte el laburo que ahora es cuando voy a publicar el post con los tutos de Angular.js que me correspondía publicar la semana pasada 😥 .

En este post vamos a empezar a darle forma a nuestra Librería Angular e ir tocando temas relacionados con el flujo de trabajo que normalmente se establece en Angular.js.

Incluí un estilo de Bootstrap bastante popular y que personalmente me agrada, lo cual no quiere decir que no sea reemplazable, amén de los iconos de Font Awesome 4 y jQuery, necesario para la ejecución correcta de las interacciones de Bootstrap (dropdowns, forms y ventanas modales).

.libro {
	margin: 5px; padding: 2px;
	display: block; height: 240px;
	border: 2px solid #1673A9;
}

Este estilo está dentro de un archivo index.html.

Una cosa importante que se me olvidó mencionar (ups, lo siento 😦 ) es que es importante para estos ejemplos, tener un servidor HTTP (no necesariamente Web como Apache) para que todos los módulos de Angular puedan funcionar adecuadamente. Podríamos utilizar SimpleHTTPServer que viene con cualquier instalación de Python.

Usamos directivas para describir comportamientos, controladores para definir esos comportamientos y módulos para encapsularlos, aunque todo en el fondo sea un módulo. Empezamos a definir nuestro módulo central de la aplicación y lo colocamos en un archivo controllers.js (donde estarán todos los controladores necesarios):

var libreria = angular.module('LibreriaApp', []);

Puntos importantes a resaltar:

  • angular.module es un método de Angular que devuelve la referencia a un módulo general.
  • 'LibreriaApp' va a ser el nombre de nuestra aplicación
  • Los corchetes [] representan un arreglo donde se debe incluir (de requerirse) cada una de las dependencias del módulo, sean módulos externos de Angular o módulos creados con Angular. A este patrón de diseño, se le conoce como Inyección de Dependencias. Pero lo dejaré vacío (por ahora 😉 ).

Dirigiendo

  • Las dobles llaves {{}} representan una expresión de Angular; segmentos en los que se evalua código Javascript.
  • ng-model es una directiva que define un modelo o un almacén de datos a ser observado por un módulo.
  • El símbolo | representa un filtro; da formato a un modelo observado.
  • $scope es el objeto global de Angular que define el alcance (global o local) de una directiva dentro de la aplicación.
  • ng-app es una directiva que define el nombre y el alcance de una aplicación de Angular. En nuestro caso se llama LibreriaApp.
  • ng-controller es una directiva que define el alcance de un controlador. Todos los atributos y métodos sólo tiene sentido dentro del alcance.
  • ng-repeat es una directiva que define la iteración de la escritura de elementos dentro del alcance de un controlador.

Una visión general de la interfaz de nuestra aplicación es esta:

Tiene pinta de librería, ¿no? Se nota que me encanta el azul… juejuejue

Controlando

El archivo controllers.js y el archivo index.html están en mi repo en el Gato-Pulpo, y pueden revisarlos a gusto pero los demás archivos me resta incluirlos (por mi “neofitez” de no saber como subir archivos al Gato-Pulpo). No obstante, voy a usar uno de los controladores para determinar la sintaxis dentro del archivo controllers.js.

//Controller para las categorías
libreria.controller('CategoriasCtrl', ['$scope', function($scope) {
	$scope.categorias = [
		{categoria: 1, nombre: "Ciencia-Ficción"},
		{categoria: 2, nombre: "Romance"},
		{categoria: 3, nombre: "Histórica"},
		{categoria: 4, nombre: "Misterio"},
	];
	$scope.nombrarCategoria = function(id){
		return $scope.categorias[id-1].nombre;
	};
}]);
  • .controller es un método de angular para referenciar un controlador
  • 'CategoriasCtrl' es el nombre del controlador.
  • '$scope' es “inyectado” como dependencia para definir el alcance de este controlador.
  • function($scope){...} es la función anónima de que determina el comportamiento del controlador. Todos los atributos y métodos tienen el mismo alcance determinado por $scope.

Todos los controladores se definen de la misma manera 😀 .

El atributo categorias se define como local dentro del alcance del controlador, como un arreglo con la lista de categorías como objetos:

Lista de categorías

Seguimos sacando partido, contando +1 al tuto… De vuelta al laburo 😉

Actualización 23-04-2015: Los archivos ya están en el Gato-Pulpo 😀

</script>

Anuncios

Un comentario en “LIBRERIA ANGULAR. PARTE 1. CONTROLANDO Y DIRIGIENDO

Los comentarios están cerrados.