จากบทความที่แล้ว การติดตั้ง ionic2 ต่อมาเราจะลองสร้าง link ต่างๆของ Application หน้าใน ionic2 ดู
1. สร้าง ionic โปรเจคชื่อ myIonic โดยใช้คำสั่ง ionic start --v2 myIonic blank ( สำหรับขั้นตอนการ install ionic สามารถคลิดดูได้ที่นี่ )
2. เปลี่ยน Theme ของ App เป็น ios โดย เปิด Folder app เปิดไฟล์ app.module.ts ( เป็นไฟล์ที่ App ของเรามี class อะไรบ้าง และเป็นการตั้งค่าต่างๆ ของ App )
จาก
imports: [
IonicModule.forRoot(MyApp)
],
เปลี่ยนเป็น
imports: [
IonicModule.forRoot(MyApp,{
mode:"ios",
backButtonText: '',
})
],
เพื่อให้ App เป็น รูปแบบ ios
3. แก้ไข Code ใน folder pages/home/home.html ซึ่งคือ interface ของหน้าแรก ( folder pages คือ folder ที่เอาไว้เก็บหน้าต่างๆใน App ) เป็น
<!-- header ของหน้า App -- >
<ion-header>
<ion-navbar>
<ion-title>
Ionic
</ion-title>
</ion-navbar>
</ion-header>
<!-- header ของหน้า App -- >
<ion-content padding>
<!--
(click)="change_page()" คือ กำหนดให้เมื่อกดเปลี่ยนหน้าแล้วไปทำงานที่ function change_page() -->
<button ion-button block icon-right (click)="change_page()" color="secondary">
เปลี่ยนหน้า
<ion-icon name="arrow-forward"></ion-icon>
</button>
</ion-content>
4. แก้ code หน้า home.ts ( เป็นไฟล์ source code typescript สำหรับ ควบคุมการทำงานของหน้า home ) ใน folder pages/home
import { Component,ViewChild } from '@angular/core';
import { Nav } from 'ionic-angular';
import { NavController } from 'ionic-angular';
import { p1 } from '../p1/p1';// import หน้า App ที่จะ link ไปปลายทาง
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
//function สำหรับ เปลี่ยนหน้า
change_page() {
this.navCtrl.push(p1); //เปลี่ยนไปหน้า p1
}
}
5. สร้างหน้า Application p1 โดยสร้าง folder ชื่อ p1 ในโฟลเดอร์ pages และ สร้างไฟล์ p1.html ( สำหรับ interface ) และ p1.ts ( สำหรับ typescript ควบคุมการทำงาน )
6. แก้ code ไฟล์ interface p1.html
<!-- ตั้งชื่อหัวของหน้า application ให้ชื่อว่า หน้า 1 -->
<ion-header>
<ion-navbar>
<ion-title>
หน้า1
</ion-title>
</ion-navbar>
</ion-header>
<ion-content >
</ion-content>
7. แก้ code หน้า p1.ts ซึ่งคือ typescript ควบคุม หน้า app เป็น
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
templateUrl: 'p1.html'//กำหนดให้ p1.html คือ interface ของหน้า
})
export class p1 { //ตั้งชื่อ class ว่า p1
constructor(public navCtrl: NavController) {
}
}
8. เปลี่ยน code ในไฟล์ app/app.module.ts ซึ่งคือไฟล์สำหรับกำหนดว่า application เรามีหน้าอะไรบ้าง และ การตั้งค่าต่างเป็น
ทดลองรัน ผลลัพธ์ที่ได้คือ
เมื่อกด เปลี่ยนหน้า
