Controladores

Los controladores podríamos decir que son el equivalente al cerebro de la aplicación, ya que son los que gestionan el flujo de los datos. Al mostrar una página de la aplicación en primer lugar se llama a un controlador, este controlador usará una vista (o template) para generar dicha página y además cargará los datos necesarios medicante servicios (services o factores, que veremos después). El controlador envía los datos necesarios a la plantilla a través de la variable $scope, de esta forma desde la vista solo tenemos que mostrar los datos recibidos dándoles el formato adecuado.

Por ejemplo, al acceder a la página #miSuperPagina se llamará automáticamente al controlador que tendrá como nombre miSuperPaginaCtrl. Este controlador está configurado para usar la plantilla llamada "superpagina.html con el siguiente contenido:

<ion-view title="About">
  <ion-content>
    Mi nombre es {{user.name}}.
  </ion-content>
</ion-view>

Para definir el controlador asociado miSuperPaginaCtrl lo podríamos realizar de la forma:

.controller('miSuperPaginaCtrl', function($scope, $stateParams, superService) {
    $scope.user = superService.getUser();
})

Los parámetros que recibe la función del controlador serán inyectados por Angular en la llamada. Por lo tanto podemos usar estos parámetros para cargar servicios o clases que necesitemos. En este ejemplo se inyecta la variable $scope que como hemos visto nos permite pasar datos a la vista, también se inyecta $stateParams que sirve para recuperar los parámetros de llamada a la ruta o pantalla actual, y por último se carga superService que es un servicio que hemos creado para acceder los datos del usuario.

Si utilizamos alguna clase y se nos olvida inyectarla en los parámetros, como por ejemplo si estamos usando $stateParams pero no lo hemos puesto para que lo incluya, nos lanzará una excepción indicando que $stateParams no está definido.

El método getUser() del servicio superService devolverá un objeto con el siguiente formato:

var user = {
    name: "Juan"
}

Al llamar a esta página en primer lugar se ejecutará el controlador asociado, el cual asignará al $scope la variable user con los datos del usuario. A continuación se procesará la plantilla, la cual accederá a la variable user.name para obtener el nombre del usuario y sustituirlo. Finalmente obtendríamos el siguiente resultado:

<ion-view title="About">
  <ion-content>
    Mi nombre es Juan.
  </ion-content>
</ion-view>

Parámetros

La clase $stateParams nos permite recoger el valor de los parámetros de entrada proporcionados a una ruta. Por lo tanto, en el controlador tenemos que añadir esta clase a sus argumentos (para que Angular la inyecte) y después simplemente accederemos a los parámetros como si fueran propiedades de este objeto. Por ejemplo, si hemos definido en la configuración una ruta para mostrar la vista detalle de un usuario:

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

El parámetro userId que recibe esta ruta lo podríamos recoger en el controlador de la forma:

.controller('miSuperPaginaCtrl', function($scope, $stateParams, superService) {
    var userId = $stateParams.userId;

    // Usamos userId para obtener los datos del usuario
    $scope.user = superService.getUser( userId );
})

De esta forma podemos acceder a todos los parámetros pasados a través de la ruta. Tenemos que tener cuidado de que el nombre de variable sea el mismo y que esté definido, de otra forma obtendríamos el valor undefined.

Más información

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

• https://docs.angularjs.org/guide/controller

• http://mcgivery.com/controllers-ionicangular/