app

app.component.ts

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

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { AboutPage } from '../pages/about/about';
import { LoginPage } from '../pages/login/login';
import { PhotoPage } from '../pages/photo/photo';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = LoginPage;

  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'หน้าแรก', component: HomePage },
      { title: 'ผลการเรียน', component: ListPage },
      {title: 'ถ่ายรูป', component: PhotoPage },
      {title: 'เกียวกับ', component: AboutPage}
    ];

  }

  initializeApp() {
    this.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.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}
------------------------------------------

app.html

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>เลือกเมนู</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
---------------------------------------------------
app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { Camera } from '@ionic-native/camera';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AboutPage } from '../pages/about/about';
import { LoginPage } from '../pages/login/login';
import { RegisterPage } from '../pages/register/register';
import { PhotoPage } from '../pages/photo/photo';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    AboutPage,
    LoginPage,
    RegisterPage,
    PhotoPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage,
    AboutPage,
    LoginPage,
    RegisterPage,
    PhotoPage
  ],
  providers: [
    Camera,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}
---------------------------------------
model
user.ts
export interface User {
    email: string;
    password: string;
}
---------------------------------------
pages
about
about.module
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AboutPage } from './about';

@NgModule({
  declarations: [
    AboutPage,
  ],
  imports: [
    IonicPageModule.forChild(AboutPage),
  ],
})
export class AboutPageModule {}
--------------------------------------
home.html
<ion-header>
  <ion-navbar color="champ1">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>หน้าแรก</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Profile: </h3>
</ion-content>
--------------------------------
login.html
<ion-header>

  <ion-navbar color="champ2">
    <ion-title>เข้าสูระบบ</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <ion-item>
    <ion-label floating>อีเมล์</ion-label>
    <ion-input type="email" [(ngModel)]="user.email"></ion-input>
  </ion-item>
  <ion-item>
      <ion-label floating>รหัสผ่าน</ion-label>
      <ion-input type="password" [(ngModel)]="user.password"></ion-input>
    </ion-item>
    <ion-grid>
      <ion-row>
        <ion-col ></ion-col>
          <ion-col >
          <button color="champ2"ion-button full (click)="login(user)">เข้าสู่ระบบ</button>
          </ion-col>
        <ion-col>
          <button color="light"ion-button full (click)="register()">ลงทะเบียน</button>
        </ion-col>
      </ion-row>
    </ion-grid>

    <ion-footer>
      <ion-navbar color="champ2">
        <ion-title>
            6139010013 นาย สุขเกษม สังสัมพันธ์
        </ion-title>
      </ion-navbar>
    </ion-footer>





</ion-content>
-----------------------------------------------
login.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';

@NgModule({
  declarations: [
    LoginPage,
  ],
  imports: [
    IonicPageModule.forChild(LoginPage),
  ],
})
export class LoginPageModule {}
--------------------------------------------
login.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,AlertController } from 'ionic-angular';
import { User } from '../../model/user';
import { HomePage } from '../home/home';
import { RegisterPage } from '../register/register';


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

  user = {
   email:'',
   password:''
   } as User;

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

  login(user: User){
    if(user.email == 'test@test.com' && user.password =='123456'){
      this.navCtrl.setRoot(HomePage);
    }else{
      const alert = this.alertCtrl.create({
      title: 'เตื่อนความปลอดภัย',
      subTitle:'อีเมล์ หรือ รหัสผ่าน ไม่ถูกต้อง',
      buttons:['ตกลง']
      });
      alert.present();
    }
  }

  register(){
    this.navCtrl.push(RegisterPage);
  }

}
---------------------------------------
photo.html
<ion-header>

  <ion-navbar>
      <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>
    <ion-title>ถ่ายรูป</ion-title>
  </ion-navbar>
  </ion-header>


<ion-content padding>

  <button ion-button large (click)="takePhoto()">
    <ion-icon name="camera"></ion-icon>
  </button>

</ion-content>
--------------------------------
photo.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PhotoPage } from './photo';

@NgModule({
  declarations: [
    PhotoPage,
  ],
  imports: [
    IonicPageModule.forChild(PhotoPage),
  ],
})
export class PhotoPageModule {}

-----------------------------------------
photo.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
@IonicPage()
@Component({
  selector: 'page-photo',
  templateUrl: 'photo.html',
})
export class PhotoPage {

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


  }
    takePhoto(){
        const options:CameraOptions ={
          quality: 100,
          destinationType: this.Camera.DestinationType.FILE_URI,
          encodingType: this.Camera.EncodingType.JPEG,
          mediaType: this.Camera.MediaType.PICTURE
        }
        this.Camera.getPicture(options).then((imageData) => {
          let base64image = 'data:image/jpeg;base64,' + imageData;
        },(err) => {
        console.log(err);

        });
    }

}
-------------------------------------
register.html
<ion-header>

  <ion-navbar color="dark">
    <ion-title>ลงทะเบียนผู้ใช้</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
    <ion-item>
        <ion-label floating>อีเมล์</ion-label>
        <ion-input type="email"></ion-input>
      </ion-item>
      <ion-item>
          <ion-label floating>รหัสผ่าน</ion-label>
          <ion-input type="password"></ion-input>
        </ion-item>
        <ion-item>
        <ion-label floating>ชื่อ-สกุล</ion-label>
          <ion-input type="text"></ion-input>
        </ion-item>

              <button color="light"ion-button full (click)="register()">ลงทะเบียน</button>
</ion-content>
-------------------------------
register.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { RegisterPage } from './register';

@NgModule({
  declarations: [
    RegisterPage,
  ],
  imports: [
    IonicPageModule.forChild(RegisterPage),
  ],
})
export class RegisterPageModule {}
---------------------------------
register.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { LoginPage } from '../login/login';

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

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

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

}
---------------------------