app.module.ts
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Http } from '@angular/http';
import { HttpModule } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import { EscolhaPage } from '../pages/escolha/escolha';
@NgModule({
declarations: [
MyApp,
EscolhaPage,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
EscolhaPage,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
home.ts
import { Component, OnInit } from '@angular/core';
import { NavController, LoadingController, AlertController } from 'ionic-angular';
import { Http } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { EscolhaPage } from '../escolha/escolha';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements OnInit {
public carros;
constructor(
public navCtrl: NavController,
private _http: Http,
private _loadingCtrl: LoadingController,
private _alertCtrl: AlertController) {}
ngOnInit() {
let loader = this._loadingCtrl.create({
content: 'Buscando novos carros. Aguarde ...'
});
loader.present();
this._http
.get('https://aluracar.herokuapp.com/')
.map(res => res.json())
.toPromise()
.then(carros => {
this.carros = carros;
loader.dismiss();
})
.catch(err => {
console.log(err);
loader.dismiss();
this._alertCtrl
.create({
title: 'Falha na conexão',
buttons: [{ text: 'Estou ciente!'}],
subTitle: 'Não foi possível obter a lista de carros. Tente mais tarde.'
}).present();
});
}
seleciona(carro) {
console.log(carro.nome);
// adiciona pagina a pilha
this.navCtrl.push(EscolhaPage, { carroSelecionado: carro });
}
};
escolha.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NavParams } from 'ionic-angular';
@Component({
selector: 'page-escolha',
templateUrl: 'escolha.html'
})
export class EscolhaPage {
public carro;
constructor(public navController: NavController, public navParams: NavParams) {
}
}
escolha.html
<!-- src/pages/escolha/escolha.html -->
<ion-header>
<ion-navbar>
<ion-title>
Sua escolha
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
</ion-content>