Vistas

Las vistas en una aplicación de Ionic se refieren al concepto de "templates" según la librería Angular. Por este motivo todas las vistas se guardarán dentro de la carpeta "templates/" en ficheros separados con extensión .html.

Las vistas contendrán la descripción de la parte gráfica de una pantalla, por lo que serán básicamente código HTML mezclado con CSS y también podremos usar otras directivas o componentes de Ionic, como botones, barras, etc. A continuación se incluye un ejemplo de una vista que guardaremos en el fichero /templates/about.html:

<ion-view title="About">
  <ion-content>
    Contenido de la vista
  </ion-content>
</ion-view>

Las vistas tienen que ir encerradas dentro de una sección <ion-view> a la que se le puede asignar opcionalmente un título. Este título se utiliza desde otras directivas como <ion-nav-bar> para obtener el texto de la barra de título.

Contenedor o página principal

Pero ¿dónde se muestran estas vistas y el título indicado? Al inicio de esta sección, al incluir el código del fichero index.html, dentro de la sección <body> añadimos dos directivas para esto:

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </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>

Como se puede intuir, la directiva <ion-nav-bar> mostrará la barra de navegación y además incluirá el título indicado en la vista. Y la directiva <ion-nav-view> es donde se incluirá el contenido de la plantilla de la vista actual.

El botón de la barra de título indicado mediante la directiva ion-nav-back-button permitirá volver a la página anterior y solo se mostrará cuando se pueda pulsar.

Sustitución de variables

Dentro de la vista o plantilla podemos acceder a los datos proporcionados por el controlador. Para mostrarlos tenemos que usar una plantilla con el formato {{nombre_variable}} que se sustiturirá por el valor de dicha variable. Por ejemplo:

<ion-view title="About">
  <ion-content>
    Mi nombre es {{name}}
  </ion-content>
</ion-view>

donde {{name}} es una variable que se ha asignado al $scope en el controlador de la forma:

$scope.name = "Juan";

Por lo que al mostrar la vista y una vez sustituidas las variables se podrá leer el texto "Mi nombre es Juan".

Es importante que nos fijemos que en la vista tenemos que usar directamente el nombre de la variable mientras que en el controlador las tenemos que añadir al objeto $scope.

Bucles

Con Angular es posible crear bucles directamente en la plantilla para repetir un trozo de código. Para esto usaremos el atributo ng-repeat en la etiqueta que queremos que se repita. Es importante que nos fijemos en que la etiqueta la hemos de colocar en el mismo atributo a repetir y no fuera. Por ejemplo, para crear una lista el elemento a repetir sería la etiqueta <li>:

<ul>
    <li ng-repeat="autor in autores">
        {{autor.nombre}} {{autor.apellidos}}
    </li>
</ul>

En este código creamos un bucle a partir de la variable autores, la cual contendrá un array de objetos con los datos de los autores. Esta variable se habrá asigando al $scope en el controlador correspondiente de la forma:

$scope.autores = [
    { nombre: "Juan", apellidos: "García" },
    { nombre: "Laura", apellidos: "Pérez" }
]

Después de procesar el bucle el código HTML que obtendríamos sería el siguiente:

<ul>
    <li>
        Juan García
    </li>
    <li>
        Laura Pérez
    </li>
</ul>

Condiciones

Además de sustituir variables y crear bucles Angular también permite crear condiciones mediante el uso de ng-if/ng-show. Ambos atributos realizarán la misma acción: mostrar u ocultar el contenido de la etiqueta en la que se encuentren dependiendo de la condición. Entonces, ¿cuál es la diferencia? Pues muy sencilla: con ng-if la etiqueta se eliminará del DOM si la condición es falsa, mientras que con ng-show la etiqueta simplemente se ocultará (pero permanecerá en el DOM).

Por ejemplo, para mostrar un mensaje si la lista de autores estuviera vacía simplemente tendríamos que hacer:

<div ng-show="!autores.length">
    La lista está vacía
</div>

El valor pasado a ng-if/ng-show puede ser una variable, una expresión o una llamada a una función, por ejemplo:

<div ng-show="mostrarAviso()">
    Aviso de ejemplo!
</div>

Y en el controlador podríamos añadir dicho método al $scope simplemente haciendo:

$scope.mostrarAviso = function(){
    return false;
}

Más información

Para más información podéis consultar:

PreviousControladoresNextServicios

Last updated