# Arquitectura de una aplicación
Ionic, al estar basado en Angular, utiliza el patron conocido como Vista-Controlador (*View-Controller*) que fue popularizado por *frameworks* como *Cocoa Touch*. En este tipo de patrón las diferentes secciones de la intefaz se pueden dividir en distintas vistas hijas o incluso podrían ser vistas hijas que contengan a su vez otras vistas hijas. Los controladores están asociados a estas vistas y se encargan de proporcionar los datos necesarios y la funcionalidad de los diferentes elementos.
En la siguiente imagen se puede ver un esquema de la arquitectura completa que sigue Ionic y Angular:
En la arquitectura de una aplicación intervienen muchos tipos de componentes además de las Vistas y Controladores, iremos viendo cada uno de ellos poco a poco, pero principalmente los que nos interesan son las Vistas, Controladores, Servicios o Factorias, y la Configuración y Rutas.
Intuitivamente, la tarea de cada uno de estos componentes en una aplicación con Ionic es la siguiente:
* Los controladores obtienen los datos de uno o varios Servicios o Factorias y lo envían a una vista o *template* a través de la variable `$scope`.
* Las vistas o *templates* contienen la descripción visual de una pantalla (o de una parte de una pantalla) y obtienen los datos a mostrar de la variable `$scope`.
* La configuración y las rutas de la aplicación permiten enlazar los controladores con las vistas o *templates* correspondientes.
* Las directivas permiten crear y usar componentes con aspecto y comportamiento personalizado.
## Inicializando la aplicación
Como ya hemos visto en secciones anteriores, el punto de inicio de una aplicación Ionic es el fichero `index.html`, el cual como mínimo deberá tener el siguiente contenido:
```markup
```
En este código en primer lugar en la cabecera se cargan las dependencias de la aplicación: hojas de estilo, librería JavaScript de Ionic (la cual incorpora Angular), librería de Cordova y los ficheros JavaScript de nuestra aplicación (`js/app.js`).
A continuación en el `body` se indica el módulo de Angular a utilizar con `ng-app="starter"`. Esta línea inicia la carga del módulo llamado `starter` que estará definido en el fichero `js/app.js` de la forma:
```javascript
angular.module('starter', ['ionic'])
```
Esta es la forma de crear un módulo con Angular, como primer parámetro indicamos el nombre del módulo (`starter`) y a continuación las dependecias, que en este caso solo se carga la librería de `ionic`. A continuación podremos indicar la configuración, los controladores y servicios que componen el módulo de la forma:
```javascript
angular.module('starter', ['ionic'])
.config( /* ... */ )
.controller( /* ... */ )
.factory( /* ... */ )
```
En las siguientes secciones veremos cada uno de estos apartados por separado y por último se incluye un ejemplo completo.