Ui.Router en AngularJs

Angular permite el manejo de rutas mediante su módulo ngRoute pero en aplicaciones medianas o grandes puede ser bastante limitante.
Para este problema surgió ui-router que permite manejar las rutas alrededor de states.
Además incorpora muchos otras funcionalidades como vistas anidadas, abstractas, multiples vistas, etc.

Instalando ui-router

Puede ser fácilmente instalado si usas npm o bower, pero para el demo de marvel que estamos construyendo simplemente usaremos un CDN que nos da acceso a la librería y la referenciamos en el html.

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>  

Agregando ui-router a una aplicación

Para agregarlo a nuestra aplicación se sigue el mismo procedimiento que cualquier otro módulo hecho en angular, simplemente tenemos que indicar el nombre dentro de las dependencias de nuestra aplicación.

angular  
    .module('marvelApp', ['ui.router'])

Uso

El uso de rutas cambia un poco la forma de trabajar ya que se necesita crear una especie de layout base, esto quiere decir que nuestro archivo index.html será como un contenedor de todos los estados que creemos con ui-router. Un estado normalmente representa una ruta aunque no siempre es el caso.
Para el demo usaremos 2 estados, el primero será el home, dónde se carga el listado de superhéroes y luego tendremos otro estado about que contendrá información sobre la aplicación web.

Para que ui.router pueda mostrar el contenido de los estados necesitamos agregar la directiva ui-view a nuestro documento html.

<ui-view>  
</ui-view>  

Ahora tenemos que definir las rutas, empezamos con el home que será lo primero que se ve cuando se inicia la aplicación. Crearé una carpeta home para poder tener de forma ordenada la configuración de las rutas. Dentro de esta carpeta crearé el archivo home.route.js y definiré la ruta de la siguiente manera:

angular  
    .module('marvelApp')
    .config(homeRoute);

    function homeRoute ($stateProvider) {

      $stateProvider
          .state('home', {
              url: '/',
              templateUrl: 'home/home.html',
              controller: 'HeroesControlleras vm'
          });
    }

Los estados se configuran dentro del método config de un módulo, usando el provider $stateProvider es propio de ui.router y tiene el método state que recibe dos parámetros, el primero una cadena con el nombre del estado y luego la definición del url. El url necesita un template y el controller.
Para el home ya tenemos el template y el home listo, solo vamos a copiar el html que teníamos en el index.html en un nuevo template dentro de la carpeta home y que tendrá el nombre home.html.
El controller ya existe así que solo necesitamos referenciarlo mediante el nombre que es HeroesController.

Ahora vamos a crear el segundo estado about que contiene información sobre la aplicación.
De la misma manera que home, creamos una carpeta about y dentro dos archivos: un javascript about.route.js y un html que será nuestro template about.html.

    angular
        .module('marvelApp')
        .config(aboutRoute);

    function aboutRoute ($stateProvider) {

        $stateProvider
            .state('about', {

                url: '/about',

                templateUrl: 'about/about.html'

            });

    }
<h1>  
    Esta web contiene información sobre algunos super héroes de Marvel
</h1>  

Listo, ahora tenemos que referenciar los nuevos scripts en el documento html principal index.html

<script src="home/home.route.js"></script>  
<script src="about/about.route.js"></script>  

Y eso es todo, cuando iniciamos la aplicación nuestra ruta inicial no sufre ningún cambio ya que hemos mantenido el home tal y como estaba antes, pero si vamos al url /about veremos el contenido del archivo about.html.

ui router angular

El código completo lo pueden encontrar en mi cuenta de github bajo el branch step-05

https://github.com/eperedo/marvel-app/tree/step-05

En el curso para crear aplicaciones web con AngularJs creado por abakio enseñaremos con detalle como usar ui.router en un nivel más avanzado usando url abstractos, multiples vistas y todos los conceptos que forman parte de una aplicación real. Aprovecha el descuento especial solo hasta el 30 de septiembre.