Funcionalidad con Ionic (AngularJS)

AngularJS por defecto maneja todas las rutas de la aplicación con ngRoute (angular-route.js). En cambio, Ionic utiliza de serie ui-router.

Ui-router es un módulo muy potente desarrollado por terceros. Es compatible con todo lo que soporta ngRoute, pero puede realizar funciones extras. Podemos destacar la siguientes:

• Permite tener vistas anidadas y con multiples nombres. Es algo indispensable para aplicaciones que tienen gran número de vistas que unas son hijas de otras.
• Posee un linking entre vistas fuerte ya que se realiza mediante el nombre del estado. Esto permite cambiar las url sin afectar a la navegación de la misma.
• Los estados permiten pasar parametros de una manera muy sencilla a través de $stateParams.

Ui-router utiliza para el enrutado de nuestra aplicación $stateProvider y $urlRouterProvider.

Lo primero que deberemos hacer en nuestra configuración de la aplicación en el app.js, es añadir estos dos servicios mencionados anteriormente. Ionic ya injecta por nosotros en su ionic.bundle.js, el módulo 'ui.router'. En caso de no estar en una aplicación de Ionic, tendríamos que añadirlo nosotros manualmente de la siguiente manera:

var myApp = angular.module('myApp', ['ui.router']);

Vamos a ver un ejemplo básico de como configuraríamos nuestros estados en una aplicación sencilla.

//Configuración de los ESTADOS
  $stateProvider
    //Estado 1
        .state("login", {
          url: '/login',
          templateUrl: 'views/login/main.html',
          controller: 'loginController',
          onEnter:function($rootScope, $state){
             if($rootScope.User)
                $state.go('view1',{});   
          }
        }) 
    //Estado 2
        .state("view1", {
          url:'/view1',
          templateUrl:'views/view1/main.html',
          controller:'firstViewController'
        })
    //Estado 3
        .state("view2", {
          url : '/view2',
          templateUrl: 'views/view2/main.html',
          controller: 'secondViewController'
        })

    //URL del estado por defecto
    $urlRouterProvider.otherwise("/login");

Como podemos ver, tenemos tres estados diferentes, login, view1 y view2.

Cada uno de ellos se compone por cuatro elementos:

1. nombre: nombre que asignamos al estado
2. url: url del estado
3. templateUrl: html que cargará ese estado
4. controller: controlador del estado

Además, podemos observar en el estado login, que aparece un onEnter, con una función definida.

Esta es otra de las grandes ventajas que posee ui-router, existen diferentes métodos que se llaman según la definición del mismo. En este caso, la función onEnter se llama antes de entrar al estado.

onEnter:function($rootScope, $state){
 if($rootScope.User)
    $state.go('view1',{});   
}

El código que hay es muy sencillo. Comprueba si ya existe un usuario logueado que estaría guardado en $rootScope.User, en caso de ser afirmativo, la aplicación pasa al estado view1, saltandose así el login. Vemos que la manera de pasar de un estado a otro es tan sencillo como poner el nombre, y los parámentros que queramos pasarle.

$state.go('view1',{});

También hay otro modo para pasar de un estado a otro desde el html directamente. Aquí un pequeño ejemplo:

<a ui-sref="view1">Go to view1</a>

Más información sobre ui-router