Powered by GitBook

Angularjs

5.1. Routing

AngularJS posee un potente sistema de routing que nos va a permitir indicar las rutas de las diferentes urls/pantallas. El routing nos permite definir la navegación de nuestra aplicación SPA.

Para poder configurar las rutas de nuestra aplicación se requiere del módulo ngRoute que se incluye en la librería angular-route.js (su versión minimizada: angular-route.min.js) ya que AngularJS no controla las rutas por defecto.

Para explicar el sistema de navegación lo haremos a partir de un ejemplo. Tenemos una aplicación con un menú que nos permite navegar entre dos páginas html diferentes.

La estructura de nuestra aplicación sería así:

app.js  
index.html

/paginas
--- pagina1.html
--- pagina2.html

/lib
--- angular.min.js
--- angular-route.min.js

En index.html definimos nuestro nombre de aplicación miApp, importamos angularjs.js y la librería angular-route.min.js para poder hacer la navegación.

Mediante el menú navegamos a las dos nuevas urls: #/pagina1 y #/pagina2 (el hastag # es para navegar en single-page sin refresco de pantalla).

index.html

<html ng-app="miApp">
    <body>

        <div>
            <a href="#/pagina1">Página 1</a> |
            <a href="#/pagina2">Página 2</a>
        </div>

        <div ng-view></div>

    <script src="lib/angular.min.js"></script>
    <script src="lib/angular-route.min.js"></script>
    <script src="app.js"></script>
    </body>
</html>

paginas/pagina1.html

<div>
    <h2>Página: 1</h2>
</div>

paginas/pagina2.html

<div>
    <h2>Página: 2</h2>
</div>

ng-view

ngView es la directiva que complementa el servicio de $route donde se renderizan las vistas que se cargan al hacer el cambio de navegación. Cada vez que una ruta es modificada, la vista cambia y se carga en ng-view según la configuración del routing. Requiere también del módulo ngRoute.

Es decir, en <div ng-view></div> de index.html se van ha cargar los htmls: pagina1.html y pagina2.html

ngview

$routeProvider

Para que funcione la navegación definimos las rutas mediante $routeProvider.

$routeProvider define las rutas mediante sus dos métodos:

  • when (path, route);
    Cuando encuentra una url entonces.... Donde path es la url y route es el objeto ruta que tiene ciertas propiedades, en nuestro ejemplo cargamos la vista indicada el parámetro templateUrl.

  • otherwise (params);
    Para cualquier otro caso aplica.... Donde en caso de no encontrar ninguna de las rutas anteriores entonces aplica esta regla. Normalmente se redirige a otra página mediante redirectTo.

Esta configuración del routing lo hacemos en el módulo de la aplicación principal miApp. Como se puede ver requiere la dependencia del módulo ngRoute y hay que importarlo en el módulo. Después mediante el método config definimos estas rutas gracias a que ya podemos acceder a $routeProvider

app.js

var miApp = angular.module("miApp",['ngRoute'])
.config(
    function($routeProvider)
    {
        $routeProvider
        .when('/pagina1',
        {
            templateUrl:'paginas/pagina1.html',
        })
        .when('/pagina2',
        {
            templateUrl:'paginas/pagina2.html',
        })
        .otherwise( {redirectTo: '/pagina1'});
    }
);