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:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, 
            user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button class="button-clear">
            <i class="ion-chevron-left padding-left"></i>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>

  </body>
</html>

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:

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:

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.

PreviousIconos NextConfiguración y rutas

Last updated 4 years ago

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:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, 
            user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button class="button-clear">
            <i class="ion-chevron-left padding-left"></i>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>

  </body>
</html>

angular.module('starter', ['ionic'])

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.