Con este artículo voy a dejar descansar esta serie de AngularJS y me centraré de nuevo en Ionic Framework, ahora que ya conocemos lo básico del funcionamiento. En el artículo anterior vimos cómo realizar peticiones asíncronas mediante el servicio $http. En este caso vamos a ver cómo funciona el Routing dentro de una aplicación AngularJS.

Objetivo del ejemplo

Hemos de tener en cuenta que AngularJS basa su infraestructura en las SPA (Single Page Application), es decir, que todo va a ocurrir dentro de la misma página y el módulo de AngularJS y sus controladores serán los encargados de ir mostrando unas u otras vistas. Pero todo ejecutado desde la misma página.

Para ello, en este ejemplo, vamos a tener un Layout con un menú que nos permitirá navegar a través de las diferentes vistas, un main.js que se encargará de definir y configurar el módulo y sus rutas, y una serie de vistas que representarán cada una de las páginas.

Preparación del ejemplo

Para poder trabajar con el Routing de AngularJS, hemos de añadir una referencia a angular-route:

El Contenedor

La página layout.html será la encargada de crear “el marco” de la aplicación. Tiene un menú a través del cual iremos cargando las diferentes vistas en el layout. Las url a las que vamos a apuntar han de comenzar por # (que representa la raíz de la aplicación).

Las vistas se cargarán en el elemento que contenga la etiqueta ng-view.

Por lo tanto, layout.html quedaría más o menos así:

layout.html

Las Vistas

Las vistas en este ejemplo serán páginas creadas dentro de una carpeta views. El contenido de estas vistas sólo ha de tener el html que se quiera cargar, con su respectivo acceso al Modelo.

views/inicio.html
views/gatos.html
views/acercade.html
views/error.html

El Módulo AngularJS

En este caso, estamos hablando de cuatro vistas (inicio, gatos, acercade, error), por lo tanto vamos a tener cuatro rutas diferentes y cuatro controladores diferentes. Lo primero es definir el módulo e inyectarle el módulo ngRoute, que nos permitirá configurar posteriormente las rutas de la aplicación.

Definimos los cuatro controladores, contando con que cada uno tendrá su propio scope:

Por último, se definen las rutas mediante la función config del módulo. El parámetro que recibe es el servicio $routeProvider, que nos permite definir rutas mediante el método when (para rutas definidas) y el método otherwise (para las rutas no definidas). Aparte del controlador y la plantilla, es posible utilizar redirectTo para indicar una redirección.

De esta manera, nuestra configuración de routing quedaría así:

Con esto ya hemos visto cómo funciona de manera básica el routing de AngularJS, teniendo en cuenta que Ionic Framework utiliza el mismo sistema.

¡Hasta la próxima!

Rupert.