Kada se radi mobilna aplikacija pitanje je vremena kada će ona postati kompleksnija tj. imati više stranica između kojih će trebati postojati interaktivnost, a to podrazumijeva prosljeđivanje nekih parametara s jedne stranice na drugu.
Pod pretpostavkom da već imate pokrenut Ionic 2 projekt možemo krenuti dalje.
Kreiranje stranica
Za početak trebamo kreirati dvije stranice. Jedna će služiti za prikaz svih korisnika $ ionic g page korisnici, a druga za prikaz jednog korisnika $ ionic g page korisnik.
Servis za dohvaćanje korisnika
Naša aplikacija će komunicirati s dva API-ja. Jedan će dohvaćati popis svih korisnika koji će se prikazivati na korisnici.html stranici, a drugi će dohvaćati detalje jednog korisnika koji će se prikazivati na stranici korisnik.html.
Servis kreiramo naredbom $ ionic g provider Korisnici
Kao što se vidi iz dolje navedene funkcije dohvatiKorisnika() ona zahtjeva parametar a.id koji je zapravo ID jednog korisnika.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import 'rxjs/add/operator/map'; @Injectable() export class KorisniciService { constructor(public _http: Http) { console.log('Korisnici Provider'); } dohvatiKorisnike(a){ return this._http.get('http://localhost:3001/api/korisnici' a) .map(res => res.json()); } dohvatiKorisnika(a: any){ return this._http.post('http://localhost:3001/api/korisnik=' + a.id) .map(res => res.json()); } } |
Popis korisnika
Funkcija u 16. liniji prosljeđuje samo jedan parametar id koji nam je i potreban na sljedećoj stranici jer prema tom parametru ćemo aktivirati API za dohvaćanje jednog korisnika koji je vezan uz taj parametar tj. uz taj ID.
Funkcija u 18. liniji prosljeđuje čitav objekt koji smo u ovom slučaju nazvali test.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<ion-header> <ion-navbar color="primary"> <button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>Korisnici</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-card *ngFor="let popis of popiskorisnika; let i=index"> <ion-card-header> <!-- Prosljeđivanje "id" parametra --> <a (click)="korisnikPage({id:popis.id})">{{popis.username}}</a> <!-- Prosljeđivanje "test" objekta --> <a (click)="korisnikPage({test:popis})">{{popis.username}}</a> </ion-card-header> <ion-card-content> <ul> <li>Username: {{popis.username}}</li> <li>Email: {{popis.email}}</li> </ul> </ion-card-content> </ion-card> </ion-content> |
U ovom kontroleru koristimo NavController ugrađenu Ionic 2 klasu za navigaciju između stranica.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { KorisniciService } from '../../providers/korisnici'; import { KorisnikPage } from './korisnik'; @Component({ selector: 'korisnici-page', providers: [KorisniciService], templateUrl: 'korisnici.html' }) export class KorisniciPage { popiskorisnika:any; a:any; constructor(public navCtrl: NavController, public _korisnici: KorisniciService) { this._korisnici.dohvatiKorisnike(this.a).subscribe(res => { this.popiskorisnika = res.popis_korisnika; }); } ionViewDidLoad() { console.log('KorisniciPage'); } korisnikPage(popiskorisnika){ this.navCtrl.push(KorisnikPage, popiskorisnika); } } |
Jedan korisnik
U ovom kontroleru također koristimo NavController ugrađenu Ionic 2 klasu za navigaciju između stranica. Ipak, ovdje nam još treba i NavParams za dohvaćanje prosljeđenih parametara.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; import { KorisniciService } from '../../providers/korisnici'; @Component({ selector: 'page-korisnik', providers: [KorisniciService], templateUrl: 'korisnik.html' }) export class KorisnikPage { popiskorisnika:any; id:number; constructor(public navCtrl: NavController, public _korisnici: KorisniciService, public _navParams: NavParams) { // Objekt od "test" parametra this.test = _navParams.data; console.log(this.test); // "ID" parametar this._navParams.get('id'); console.log(this._navParams.get('id')); // "ID" parametar this.id = _navParams.get('id'); console.log(this.id); this._korisnici.dohvatiKorisnika(this.id).subscribe(res => { this.korisnik = res.jedan_korisnik; }); } ionViewDidLoad() { console.log('KorisnikPage'); } } |
U slučaju kada smo kao parametar proslijedili čitav test objekt podatke ćemo prikazati na sljedeći način. Znači, prilikom učitavanja stranice ne trebamo pozivati nikakav drugi API jer smo si proslijedili potrebne podatke o korisniku koje možemo prikazati na ekranu.
1 2 3 4 5 6 7 8 9 10 |
<ion-card> <ion-card-header> <p> {{test.username}}</p> </ion-card-header> <ion-card-content> <ul> <li>{{test.email}}</li> </ul> </ion-card-content> </ion-card> |
Ali ako smo proslijedili samo parametar id pomoću kojega aktiviramo API za prikaz detalja jednog korisnika tada podatke prikazujemo na sljedeći način
1 2 3 4 5 6 7 8 9 10 |
<ion-card> <ion-card-header> <p> {{korisnik.username}}</p> </ion-card-header> <ion-card-content> <ul> <li>{{korisnik.email}}</li> </ul> </ion-card-content> </ion-card> |
Zaključak
I to je to. Ovo su osnove koje se tiču prosljeđivanja parametara između stranica u Ionic 2 aplikaciji. Sve dalje ovisi o specifičnim potrebama svake Ionic 2 aplikacije.