search

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:

Dentro de la carpeta templates vamos a colocar las dos plantillas que necesitaremos. La plantilla home.html con el siguiente contenido:

Y la plantilla about.html con el contenido:

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:

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:

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

Una vez completado el código podemos probar la aplicación ejecutando en un terminal el comando:

PreviousDirectivasNextPlugins

Last updated