TallerAppsIonic

Taller de desarrollo de aplicaciones móviles, Universidad de la Amazonia.

View the Project on GitHub

Sesión 3

Recomendado: Leer documentacion aquì.

  1. Ionic CLI
    • Crear proyecto: ionic start MyApp --v2.
    • Correr servidor de desarrollo: ionic serve.
  2. UI (Interfaz de Usuario)
    • UI para listado.
    • UI para Cards.
  3. Bindings & Directivas
    • ngFor
    • ngIf
    • click
    • ngModel
  4. Repaso Typescript.

Conceptos

Desarrollo

Objeto tipo vector de cadenas con tres elementos. La variable listado se crea dentro del componente de la pagina, p.ej: about.ts. Ver más.

listado = ['Sesión 1', 'Sesión 2', 'Sesión 3']

El siguiente segmento de código se agrega dentro de las etiquetas <ion-content>. Ver más.

<ion-list>
  <button ion-item *ngFor="let item of listado">
    
  </button>  
</ion-list>

No olvidar colocar * antes del ngFor, *ngFor.

Resultado

Mostrar listado de Cards. Incluye la captura de la variable de indexado index

<ion-card *ngFor="let item of listado; let i = index">
  <ion-card-header>
    Card 
  </ion-card-header>
  <ion-card-content>
    Contenido de la variable item: 
  </ion-card-content>
</ion-card>

Resultado

Angular 2 ofrece la directiva *ngIf para establecer condiciones. *ngIf: si la condición se cumple, su elemento se inserta en el DOM, en caso contrario, se elimina del DOM. (equivale al ng-if de AngularJS v1 y v-if de VueJS)

<label *ngIf="i > 1">El index es mayor que 1</label>

Donde i es una variable generada por el ngFor. Ver ejemplo de listar Cards. Ver más

En el componente, se agregan los atributos a usar. En este caso se usan dos variables de tipo string para el intercambio de datos entre template y component. Ver màs

email: string = ''
passw: string = ''

Posteriormente se usa la directiva de Angular 2, [(ngModel)], para la especificaciòn de los objetos que han sido creados en el componente. Ver màs

<ion-input type="email" placeholder="Entrada de correo" [(ngModel)]="email"></ion-input>

Una vez terminado lo anterior, se procede a verificar el binding mediante la visualizaciòn de los datos al instante en que se escribe el siguiente segmento de codigo: Ver màs

<ion-item>
   & 
</ion-item>

Nota: Recordar que es la sintaxis para llamar elementos directamente desde el componente, donde `xyz` es el nombre del objeto y es la manera en que Angular2 realiza esta funciòn. El simbolo & es solo decoraciòn, no corresponde a ninguna funciòn de Angular u Ionic.

Se requiere hacer la funciòn de eliminar elementos de una lista cuando se presiona click a un item de la misma (se elimina el item seleccionado)

Tenemos el siguiente segmento de còdigo que se muestra una lista de elementos existentes en el objeto lista (Ubicado en el home.ts) Ver màs

<!-- home.html -->

<ion-list>
  <ion-item *ngFor="let item of lista; let i = index">
    
  </ion-item>
</ion-list>

Usar la directiva (click) propia de Angular. Ejecuta una funcion determinada cada vez que un elemento detecta el evento de click sobre si mismo.

<!-- home.html -->

<ion-list>
  <ion-item *ngFor="let item of lista; let i = index" (click)="remove(i)">
    
  </ion-item>
</ion-list>

Notar que se añadiò la funcion remove junto con la directiva (click). Cuando la funciòn se ejecuta, se le envia el paràmetro i que corresponde al indice o index creado por la anterior directiva, *ngFor.

La funciòn remove(i) ejecuta:

// Home.ts

remove(i: number) {
  this.lista = this.lista.filter((val, index) => i !== index)
}

Donde se hace un filtrado de elementos mediante la funciòn filter. Filter es un metodo propio de las listas en javascript. Ver màs

Mas información