import { Component } from '@angular/core';
import { NavController, LoadingController, AlertController } from 'ionic-angular';
import { Carro } from '../../modelos/carro';
import { HttpErrorResponse } from '@angular/common/http'
import { CarrosServiceProvider } from '../../providers/carros-service/carros-service';
import { NavLifeCycles } from '../../utils/ionic/nav/nav-lifecycle';
import { EscolhaPage } from '../escolha/escolha';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage implements NavLifeCycles{
public carros: Carro[];
constructor(
public navCtrl: NavController, // esse é o que controla a navegação da página.
private loadingCtrl: LoadingController, // faz com que apareça a barra de carregamento.
private alertCtrl: AlertController, // serve para indicar qual o erro encontrado ao tentar acessar o endereço da API e estar incorreta.
private carroServico: CarrosServiceProvider
) {}
ionViewDidLoad() {
let loading = this.loadingCtrl.create({
content: 'Aguarde o carregamento dos carros...'
})
loading.present(); // apareça a barra de carregamento.
this.carroServico.lista() // chamando meu método do serviço para dar o subscribe.
.subscribe( (carrosAPI) =>
{ // inscrevendo para pegar o retorno dos dados obtidos da API.
this.carros = carrosAPI;
loading.dismiss(); // remova o carregamento.
},
(err: HttpErrorResponse) => { // tratando o erro encontrado.
console.log(err); // msg do console.log.
loading.dismiss(); // desaparece o carregamento do loading.
this.alertCtrl.create({ // cria um popup exibindo qual foi o erro que gerou para o usuário entender que houve um erro.
title: 'Falha na conexão', // mensage do titulo do erro.
subTitle: 'Não foi possível carregar a lista de carros. Tente novamente mais tarde!', // mensage do corpo do erro.
buttons: [ // criando um botão.
{ text: 'Ok'} // mensagem do botão.
]
}).present()// se não tiver o present o erro não será apresentado.
})
}
selecionaCarro(carro: Carro){
console.log(carro);
this.navCtrl.push(EscolhaPage.name, { // EscolhaPage.name ele pega o nome da classe do componente caso seja alterado não tera problema.
carroSelecionado: carro
}); // aqui faz como se estivesse empilhando em cima da outra página.
}
}
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Carro } from '../../modelos/carro';
@IonicPage()
@Component({
selector: 'page-escolha',
templateUrl: 'escolha.html',
})
export class EscolhaPage {
public carro: Carro;
constructor(
public navCtrl: NavController,
public navParams: NavParams) {
this.carro = this.navParams.get('carroSelecionado'); // busca no navParams a propriedade carroSelecionado criado no home.
}
ionViewDidLoad() {
console.log('ionViewDidLoad EscolhaPage');
}
}
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { EscolhaPage } from './escolha';
@NgModule({
declarations: [
EscolhaPage,
],
imports: [
IonicPageModule.forChild(EscolhaPage),
],
exports: [
EscolhaPage
]
})
export class EscolhaPageModule {}
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { HttpClientModule } from '@angular/common/http';
import { CarrosServiceProvider } from '../providers/carros-service/carros-service';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
CarrosServiceProvider
]
})
export class AppModule {}