# Ejemplo completo
Como ejemplo vamos a crear una aplicación con dos pantallas. En primer lugar definimos el contenido del fichero `index.html`:
```markup
```
Este fichero carga todas las dependencias e inicia la carga del módulo `starter` de Angular. En el fichero `js/app.js` creamos dicho módulo y definimos ya las rutas que va a tener:
```javascript
angular.module('starter', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '',
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
})
.state('about', {
url: '/about',
templateUrl: 'templates/about.html',
controller: 'aboutCtrl'
});
// Página por defecto
$urlRouterProvider.otherwise('');
})
```
Dentro de la carpeta `templates` vamos a colocar las dos plantillas que necesitaremos. La plantilla `home.html` con el siguiente contenido:
```markup
Aplicación de ejemplo.
Información sobre el autor
```
Y la plantilla `about.html` con el contenido:
```markup
El autor de esta aplicación es {{author.name}}.
```
A continuación vamos a definir los controladores, los cuales los añadiremos también dentro del fichero `js/app.js`. El controlador para el estado `home` lo dejamos vacío ya que no necesita realizar ninguna acción:
```javascript
.controller('homeCtrl', function($scope) {
;
})
```
En el controlador para el estado `about` cargamos el servicio `aboutService` y asignamos el valor devuelto por el método `getAuthor()` a una variable del `$scope` que será sustituida en la vista correspondiente:
```javascript
.controller('aboutCtrl', function($scope, aboutService) {
$scope.author = aboutService.getAuthor();
})
```
Por último añadimos el servicio `aboutService` también al fichero `js/app.js`:
```javascript
.factory('aboutService', function() {
return {
getAuthor: function() {
var author = { name: "Juan" };
return author;
},
}
})
```
Una vez completado el código podemos probar la aplicación ejecutando en un terminal el comando:
```
$ionic serve
```