LIBRERIA ANGULAR. PARTE 2. ENRUTANDO

<script src=”my own” title=”parte 2. enrutando”>

Se que no es miércoles, que ya ha pasado un mes desde el último post y que quizás no tenga excusa por su paciencia… Pero aquí estamos de nuevo, sacando la info necesaria (y el tiempo y la paciencia, etcétera) para este tuto 😛

Si revisaron mi repo en el Gato-Pulpo, se darán cuenta que está muy diferente a como lo dejé la primera vez que estaba subiendo archivos cual neófito cuando aprende algo nuevo. Entre las cosas que hice, está la refactorización del código, pero vamos por partes como Jack El Destripador.

Controlando

En el archivo app/controllers.js incluí un nuevo controlador que se encarga de darle sentido a los templates de nuestra aplicación, dejando una página de inicio más modularizada, llamado TemplateCtrl:

//Controller para administrar los templates
libreria.controller('TemplateCtrl', ['$scope', function($scope) {
    var rootDir = 'templates/';
    $scope.templates = [
        {url : rootDir+'menu_superior.html'},
        {url : rootDir+'nuevo_libro.html'},
        {url : rootDir+'nueva_categoria.html'},
        {url : rootDir+'comprar.html'}
    ];
}]);

Nada de misterioso, en realidad es un módulo cuya sintaxis ya expliqué en el post anterior a este tuto. Ahora nuestro archivo index.html, dentro del body queda así:

    <div ng-controller="TemplateCtrl">
        <!-- Template Menú Superior -->
        <div ng-include="templates[0].url"></div>

        <!-- Lista de Libros -->
        <div ng-view></div>

        <!-- Modal Agregar Nuevo Libro -->
        <div ng-include="templates[1].url"></div>

        <!-- Modal Agregar Nueva Categoría -->
        <div ng-include="templates[2].url"></div>

        <!-- Modal Comprar Libro -->
        <div ng-include="templates[3].url"></div>
    </div>

Dirigiendo

En las líneas resaltadas del código anterior vemos dos nuevas directivas que usamos para refactorizar el código:

  • ng-include es una directiva que se utiliza para incluir código html estático dentro de la vista principal. En este caso se incluyen por esta vía el menú superior y el resto de ventanas modales, refactorizadas en los archivos que están en el directorio templates.
  • ng-view es una directiva usada para incluír código html dinámico, o que por la naturaleza misma de los datos a ser presentados, cambiará constantemente dentro de la aplicación. En este caso, esta directiva se usa en conjunto con el módulo o dependencia ‘ngRoute’ que se explicará más adelante.

Adicionalmente hay otro elemento a ser resaltado aparte:

  • El objeto global $parent que está referenciado en el archivo templates/menu_superior.html, se utiliza debido a que al estar incluyendo vistas mediante la directiva ng-include. cada inclusión crea un $scope local para cada vista, entonces este objeto se encarga de trasladar el control a un $scope superior, llamado $rootScope.
Ilustración de $rootScope. $parent le transfiere el $scope.

Ilustración de $rootScope. $parent le transfiere el $scope.

Enrutando

Si bien el concepto de rutas no es nuevo, Angular.js le da una “vuelta de tuerca”. En tal sentido, el framework procura realizar aplicaciones SPA y conservar una arquitectura “modularizada” utilizando para ello URLs definidas por el usuario.

Para lograr esto, es necesario “inyectar una dependencia” de Angular.js, el módulo angular-route.min.js. Para ello, primero lo incluimos en index.html (en mi caso reside físicamente en el directorio external):

<script src="external/angular-route.min.js"></script>

Luego, en el archivo app/controllers.js inyectamos la dependencia en el módulo:

//                 se incluye la dependencia -\
var libreria = angular.module('LibreriaApp', ['ngRoute']);

Para crear la arquitectura modular que deseamos, hice un archivo llamado router.js dentro del directorio app que contendrá la configuración de todas las rutas de nuestra aplicación.

//Se instancia el módulo de manera global
var libreria = angular.module('LibreriaApp');

libreria.config(['$routeProvider', function($routeProvider){
    var rootDir = 'templates';
    $routeProvider
        .when('/', {
            templateUrl: rootDir+'/libros.html',
            controller: 'LibrosCtrl'
        })
        .otherwise({ redirectTo: '/' });
}]);
  • En la línea 2 se instancia la aplicación de manera global para app/router.js.
  • En la línea 4, .config es el método de angular que maneja las dependencias de configuración de las rutas. Requiere dos parámetros obligatorios.
    • $routeProvider, que es el objeto de Angular que provee acceso a URLs y,
    • una función anónima que almacene la configuración de las rutas dentro de $routeProvider.
  • En la línea 7, el objeto $routeProvider tiene dos funciones:
    • La función .when() que acepta dos parámetros:
      • un string con la URL personalizada y,
      • un objeto que define dos atributos:
        • templateUrl: código html que va a insertarse en la sección donde esté definida la directiva ng-view.
        • controller: string del controlador que va a manejar el $scope de dicho template.
    • La función .otherwise(), en la linea 11, que define un objeto con la ruta o redirección por defecto, en caso de que ninguna de las URLs definidas con el método .when() sea encontrada.
  • Respecto a la última línea, considere que puede invocar infinitas funciones .when() dependiendo de las rutas que se necesiten, pero solo un .otherwise().

Sigo aumentando +1 a la cuenta. Esta quedando muy chido 😉

</script>

Anuncios