Day2

[ditsada]

ทดลองสร้าง Project แบบ Tabs

ionic start myApp tabs

• home.html

  
  <ion-header>
  <ion-navbar color="orange">
      <ion-title>BMI</ion-title>
  
      <ion-buttons end>
          <button ion-button icon-only (click)="logout()">
              <ion-icon name="log-out"></ion-icon>
          </button>
      </ion-buttons>
  
  </ion-navbar>
  </ion-header>

ตกลง

ผลการคำนวณ {{bmi|number:'1.2-2'}}

ดัชนีมวลกายน้อยกว่า 18.5 ถือว่าน้ำหนักน้อยกว่าปกติ

ดัชนีมวลกายระหว่าง 18.5 - 24.9 ถือว่าน้ำหนักปกติ

ดัชนีมวลกายระหว่าง 25 - 29.9 ถือว่าน้ำหนักเกิน

ดัชนีมวลกายมากกว่า 30 ถือว่าน้ำหนักอ้วน

- <h2>home.ts</h2>
```typescript
import { Component } from '@angular/core';
import { App, NavController, NavParams, LoadingController, AlertController } from 'ionic-angular';

import { LoginPage } from '../login/login';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    weight: number
    height: number
    bmi: number

    errorMessage: string;

    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        public app: App,
        public alertCtrl: AlertController,
        public loadingCtrl: LoadingController
    ) {
    }
    calBmi() {
        // alert("test: " + this.weight + " " + this.height)
        this.bmi = this.weight / ((this.height / 100) * (this.height / 100))

    }

    logout() {

        let confirm = this.alertCtrl.create({
            title: 'ยืนยัน',
            message: 'คุณต้องการออกจากระบบหรือไม่',
            buttons: [
                {
                    text: 'ใช่',
                    handler: () => {
                        localStorage.removeItem('token');
                        let nav = this.app.getRootNav();
                        nav.setRoot(LoginPage);
                    }
                },
                {
                    text: 'ไม่ใช่',
                    handler: () => {
                        // console.log('Disagree clicked');
                    }
                }
            ]
        });
        confirm.present();

        // localStorage.removeItem('token');
        // let nav = this.app.getRootNav();
        // nav.setRoot(LoginPage);
    }// let nav = this.app.getRootNav();

}

[ditsada]

ทดลองดึงข้อมูลด้วย Rest Api

ionic g page countries

• Countries.html

<ion-header>
    <ion-navbar color="linkedln">
        <ion-title>Countries</ion-title>        
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-list>
        <ion-item *ngFor="let c of countries">
            <ion-avatar item-left>
                <img src="{{c.flag}}">
            </ion-avatar>
            <h2>{{c.name}}</h2>
            <p>Capital: {{c.capital}}, Region: {{c.region}}</p>
        </ion-item>
    </ion-list>
</ion-content>

• Countries.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { CountriesProvider } from '../../providers/countries/countries';

@IonicPage()
@Component({
    selector: 'page-countries',
    templateUrl: 'countries.html',
})
export class CountriesPage {

    countries: string[];

    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        public countriesProvider: CountriesProvider,
    ) {
    }

    ionViewDidLoad() {
        this.getCountries();
    }

    getCountries() {

        this.countriesProvider.getCountries().then((data: any) => {
            // console.log(data);
            this.countries = data;
        }, err => {
            console.log(err);
        });

    }
}

ionic g provider countries

• Countries.ts [Provider]

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class CountriesProvider {

    url: string = 'https://restcountries.eu/rest/v2/all';

    constructor(public http: HttpClient) {
        console.log('Hello CountriesProvider Provider');
    }

    getCountries() {
        return new Promise(resolve => {
            this.http.get(this.url)
                .subscribe(data => {
                    resolve(data);
                }, err => {
                    console.log(err);
                });
        });
    }
}