Ejemplo completo

Como ejemplo vamos a crear una aplicación con dos pantallas. En primer lugar definimos el contenido del fichero index.html:

<!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">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <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>

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:

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:

<ion-view title="Inicio">
  <ion-content>
    Aplicación de ejemplo.

    <a ui-sref="about">Información sobre el autor</a>
  </ion-content>
</ion-view>

Y la plantilla about.html con el contenido:

<ion-view title="Autor">
  <ion-content>
    El autor de esta aplicación es {{author.name}}.
  </ion-content>
</ion-view>

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:

.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:

.controller('aboutCtrl', function($scope, aboutService) {
    $scope.author = aboutService.getAuthor();
})

Por último añadimos el servicio aboutService también al fichero js/app.js:

.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
PreviousDirectivasNextPlugins

Last updated