> 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_ejemplo.md).
# 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
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://ajgallego.gitbook.io/ionic/arquitectura/arquitectura_ejemplo.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.