Configuración y rutas

La configuración nos permite establecer las rutas o estados (states) que va a tener la aplicación y enlazar cada uno de ellos con una ruta, un controlador y un template (la vista). Además se tendrá que especificar también una ruta inicial o por defecto.

A continuación se incluye un ejemplo de como especificar la configuración de un módulo:

.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state('home', {
          url: '',
          templateUrl: 'templates/home.html',
          controller: 'homeCtrl'
        })
        .state('page', {
          url: '/page',
          templateUrl: 'templates/page.html',
          controller: 'pageCtrl'
        });

    // Página por defecto
    $urlRouterProvider.otherwise('');
})

En este ejemplo se establecen dos rutas o estados. La primera llamada home, que tendrá la URL vacía y usará el template home.html y el controlador homeCtrl. Y la segunda ruta llamada page que tendrá la URL /page, usará el template page.html y el controlador pageCtrl. Además se establece que por defecto (en la primera llamada y cuando la ruta no exista) se usará la ruta vacía, que se corresponde con el estado home.

Si decimos que incluya una plantilla que no existe o nos equivocamos en el nombre del fichero html no mostrará ningún error, simplemente no funcionará.

Al realizar una consulta a la aplicación en primer lugar se creará el módulo con esta configuración y a continuación se cargará la ruta solicitada o la ruta por defecto. Si por ejemplo se solicita el estado home se llamará al controlador indicado para preparar los datos y a continuación se cargará el template home.html, se sustituirán los valores de la plantilla con los indicados en el controlador y por último se mostrará la vista al usuario.

Enlaces

Para crear un enlace que nos lleve a un estado indicado en la configuración simplemente tenemos que usar el atributo ui-sref con el nombre del estado deseado. Por ejemplo, para volver al home podríamos hacer:

<a ui-sref="home">Volver al inicio</a>

Si ponemos un enlace a una dirección que no existe o a un state que no existe no mostrará un error. Al pulsar intentará cambiar de pantalla pero volverá a mostrarse la misma donde estaba.

Rutas con parámetros

También podemos generar rutas con parámetros para pasar valores entre vistas. Por ejemplo, podemos tener un listado de usuarios y al pulsar sobre un elemento de la lista abrir una nueva pantalla con la vista detalle del usuario. Para esto es necesario que el enlace indique el índice del elemento pulsado para así poder abrir la vista con los datos del usuario correspondiente.

Para añadir parámetros a las rutas simplemente tenemos que indicarlos anteponiendo dos puntos (:) al nombre del parámetro en la url, por ejemplo:

.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('users', {
            url: '/users'
        })
        .state('userDetail', {
            url: '/user/:userId'
        })
        .state('userPost', {
            url: '/user/:userId/:postId'
        });
})

En el ejemplo anterior se definen tres rutas o estados. La primera (users) no tiene ningún parámetro y la usaremos para mostrar toda la lista de usuarios. La segunda (userDetail) recibe un parámetro (userId) a partir del cual podremos obtener los datos del usuario solicitado. Y el último estado (userPost) recibe dos parámetros para indicar un artículo de un usuario.

También podemos definir los parámetros de las rutas usando llaves en lugar de dos puntos. Por ejemplo, para el último estado del ejemplo anterior podriamos haber puesto /user/{userId}/{postId}.

Para generar un enlace a una ruta con parámetros usaremos también el atributo ui-sref y simplemente tenemos que añadir al nombre del estado un objeto entre paréntesis con los valores. A continuación se muestra un ejemplo:

<a ui-sref="users">Ver todos los usuarios</a>
<a ui-sref="userDetail({ userId: id })">Detalles del usuario</a>
<a ui-sref="userPost({ userId: id, postId: pid })">Detalle artículo</a>

Los nombres de las propiedades del objeto tienen que coincidir con los nombres que hayamos puesto a los parámetros de la ruta. Por ejemplo, en userDetail({ userId: id }), el nombre userId coincide con el de la ruta /user/:userId.

En el siguiente apartado sobre controladores veremos como recoger estos valores desde un controlador.

Más información

Para más información podéis consultar:

PreviousArquitectura de una aplicaciónNextControladores

Last updated