> For the complete documentation index, see [llms.txt](https://ajgallego.gitbook.io/ionic/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ajgallego.gitbook.io/ionic/arquitectura/arquitectura_controladores.md).
# 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:
```markup
Mi nombre es {{user.name}}.
```
Para definir el controlador asociado `miSuperPaginaCtrl` lo podríamos realizar de la forma:
```javascript
.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:
```javascript
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:
```markup
Mi nombre es Juan.
```
## 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:
```javascript
.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:
```javascript
.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:
*
*