Material‎ > ‎Software‎ > ‎Angular JS‎ > ‎

Ruteo con ngRoute

Objetivo

Es la solución por defecto que provee AngularJS para facilitar el mapeo de URLs o rutas en el browser con las vistas y controllers de Angular. 

Dependencias

Package JSON

Debemos indicar en el package JSON la dependencia contra el módulo angular-route:
{
  "name": "libros",
  "version": "0.0.1",
  ...
  "dependencies": {
    ...
    "angular-route": "~1.4.0"
  }
}

En el módulo

En la definición de nuestra aplicación, debemos indicar la dependencia con el módulo ngRoute:

'use strict';
/* App Module */
var librosApp = angular.module('librosApp', [
  'ngRoute',
  ...
]);

Esto indica a Angular que cuando creemos nuestros módulos le inyecte las dependencias: ngRoute es un well known, lo declaramos en la primer linea y lo podemos usar en la configuracion de la app, haciendo que le llegue por parámetro lo que necesita.

Definición

Por convención, se suele definir el routing en un archivo routes.js o similar, que hay que linkear en la vista html.

La definición de las rutas sigue este esquema:

librosApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/libros', {
        templateUrl: 'partials/libros-list.html',
        controller: 'LibroListCtrl'
      }).
      when('/libros/:libroId', {
        templateUrl: 'partials/libros-show.html',
        controller: 'LibroDetailCtrl'
      }).
      otherwise({
        redirectTo: '/libros'
      });
  }])

Angular inyecta el objeto $routeProvider, que provee el servicio de routing que define el $route service a través de la siguiente sintaxis:
when(path, route);
donde 
  • el path es una URL que se define a partir del servidor web donde está instalado. En el ejemplo: '/libros' indica que si el servidor local está levantado en el puerto 9000 la URL del browser será http://localhost:9000/libros
    • en el caso del detalle del libro podemos pasar dentro de la URL un parámetro: el identificador del libro. Más abajo se ve cómo se le pasa esa información al route
  • la ruta se compone de
    • un template o porción de html, que por convención se ubica en el directorio partials
    • y un controller que permite definir una serie de variables para tener binding
El mensaje otherwise permite definir qué ocurre cuando el usuario tipea una URL que no existe en el servidor. Ejemplo: si se busca http://localhost:9000/broli se redireccionará a la URL http://localhost:9000/libros en lugar de aparecer el mensaje 404.

Uso

Vemos cómo en la vista que muestra todos los libros se invoca a la vista de detalle pasando el identificador del libro:

      <ul class="libros">
        <li ng-repeat="libro in libros">
          <a href="#/libros/{{libro.id}}">{{libro.titulo}}</a>

Y en el controller de detalle del libro podemos capturar la información del id:

librosApp.controller('LibroDetailCtrl', ['$routeParams',
  function($routeParams) {
    this.libroId = $routeParams.libroId;
  }]);

Ventajas

Implementa el concepto de deep linking, que nos permite trabajar
  • el historial de navegacion
    • e ir adelante o atrás
  • o bien definir bookmarks para volver a cargar la página sin necesidad de pasar por todos los estados anteriores
Comments