Ionic: สร้างหน้า Login – logout

สร้างโปรเจ็กส์

[code]
> ionic start tabsApp tabs
[/code]

สร้างหน้า login

[code]
> ionic g page login
[/code]

แก้ไขไฟล์

src/app/app.module.ts
src/app/app.components.ts
src/pages/login/login.html
src/pages/login/login.ts
src/pages/about/about.html
src/pages/about/about.ts

1. src/app/app.module.ts

import หน้า login

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 { LoginPage } from '../pages/login/login';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    LoginPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    LoginPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

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 { LoginPage } from '../pages/login/login';

@NgModule({

declarations: [

MyApp,

AboutPage,

ContactPage,

HomePage,

TabsPage,

LoginPage

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

AboutPage,

ContactPage,

HomePage,

TabsPage,

LoginPage

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

2. src/app/app.components.ts

กำหนดให้หน้าแรกชี้มาที่หน้า login

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/login/login';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = LoginPage;

  constructor(platform: Platform, 
    statusBar: StatusBar, 
    splashScreen: SplashScreen) {

    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

import { Component } from '@angular/core';

import { Platform } from 'ionic-angular';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';

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

@Component({

templateUrl: 'app.html'

})

export class MyApp {

rootPage:any = LoginPage;

constructor(platform: Platform,

statusBar: StatusBar,

splashScreen: SplashScreen) {

platform.ready().then(() => {

// Okay, so the platform is ready and our plugins are available.

// Here you can do any higher level native things you might need.

statusBar.styleDefault();

splashScreen.hide();

});

}

ไปที่ https://ionicframework.com/docs/components/ แล้วหาตัวอย่างหน้า login

3. src/pages/login/login.html

<ion-header>
  <ion-navbar>
    <ion-title>login</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label floating>Username</ion-label>
      <ion-input type="text" value=""></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Password</ion-label>
      <ion-input type="password" value=""></ion-input>
    </ion-item>
  </ion-list>

  <div padding>
    <button ion-button color="primary" block>Sign In</button>
  </div>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>login</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item>

<ion-label floating>Username</ion-label>

<ion-input type="text" value=""></ion-input>

</ion-item>

<ion-item>

<ion-label floating>Password</ion-label>

<ion-input type="password" value=""></ion-input>

</ion-item>

</ion-list>

</div>

</ion-content>

เมื่อกดปุ่มในหน้า login แล้วให้เรียกหน้า tabs
โดยเพิ่มการเรียกอีเวน click
แก้ไขไฟล์ src/pages/login/login.html

  <div padding>
    <button (click)="goTabs()" ion-button color="primary" block>Sign In</button>
  </div>

</div>

4. src/pages/login/login.ts

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

import { TabsPage } from '../tabs/tabs';

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

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

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  goTabs() {
    this.navCtrl.setRoot(TabsPage);
  }
}

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { TabsPage } from '../tabs/tabs';

@IonicPage()

@Component({

selector: 'page-login',

templateUrl: 'login.html',

})

export class LoginPage {

constructor(public navCtrl: NavController, public navParams: NavParams) {

}

ionViewDidLoad() {

console.log('ionViewDidLoad LoginPage');

}

goTabs() {

this.navCtrl.setRoot(TabsPage);

}

5. src/pages/about/about.html

วางปุ่ม logout ไว้ที่หน้า about

<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div padding>
    <button (click)="goLogin()" ion-button color="danger" block>Log out</button>
  </div>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

About

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

</div>

</ion-content>

6. src/pages/about/about.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

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

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {

  constructor(public navCtrl: NavController) {

  }

  goLogin() {
    this.navCtrl.setRoot(LoginPage);
  }
}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

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

@Component({

selector: 'page-about',

templateUrl: 'about.html'

})

export class AboutPage {

constructor(public navCtrl: NavController) {

}

goLogin() {

this.navCtrl.setRoot(LoginPage);

}

จะเห็นหน้า logout ละ
logout

เมื่อกดปุ่ม logout จะเห็นหน้า login ที่ติดอยู่ใน tabs

login3

src/pages/about/about.ts

แก้ไขไม่ให้หน้า login ติดอยู่ใน tab

import { Component } from '@angular/core';
import { NavController, App } from 'ionic-angular';
import { LoginPage } from '../login/login';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {

  constructor(public navCtrl: NavController,
    public app: App) {

  }

  goLogin() {
    this.navCtrl.setRoot(LoginPage);
    let nap = this.app.getRootNav();
    nap.setRoot(LoginPage);
  }
}

import { Component } from '@angular/core';

import { NavController, App } from 'ionic-angular';

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

@Component({

selector: 'page-about',

templateUrl: 'about.html'

})

export class AboutPage {

constructor(public navCtrl: NavController,

public app: App) {

}

goLogin() {

this.navCtrl.setRoot(LoginPage);

let nap = this.app.getRootNav();

nap.setRoot(LoginPage);

}

บรรทัดที่ 18-19 : ทำให้หน้า login ที่ไม่ติดใน tabs

เวลากด logout ก็จะแสดงหน้า login ที่ไม่ติดใน tabs ละ

[BOXMOBILEDEV] Ionic 3 EP9 : สร้างหน้า Login UI
[BOXMOBILEDEV] Ionic 3 EP10 : การใช้ Logout UI และ การใช้ Events

Phaisarn Sutheebanjard

blog.phaisarn.com

Ionic: สร้างหน้า Login – logout