() translation by (you can also view the original English article)
ในบทความนี้ เราจะดูกันที่ Ionic pages. เราจะบอกวิธีการแก้ไขเนื้อหาภายใน app ของคุณ รวมทั้งการสร้าง app pages เพิ่มเติมและการติดตั้ง navigation
การแก้ไขเนื้อหาใน Page
จากบทความ เริ่มต้นด้วย Ionic, เราได้เรียนรู้วิธีการสร้าง Ionic project แรกของเราไปแล้ว. ต่อเนื่องจากบทความดังกล่าว, ในบทความนี้, เราจะทำการแก้ไข pages ที่เราได้สร้างไว้.
เพื่อที่จะแก้ไข page ของเรา, เราต้องเปิด project ขึ้นมาก่อนด้วยเครื่องมือ text editor. ในกรณีของผู้เขียน, จะใช้ Visual Studio Code, แต่คุณไม่ต้องใช้อันนี้ก็ได้ โปรดให้ text editor ที่คุณชอบ. คุณได้เปิดโปรเจคไว้แล้ว, มันจะมีหน้าตาคล้ายๆ กับรูปด้านล่าง (เปิดทั้งโปรเจคและไม่ได้ระบุเฉพาะเจาะจงที่ page ใด page หนึ่ง):
Ionic ใช้ไฟล์ page เพื่อเก็บไฟล์ที่คุณต้องการเปลี่ยนไปยังหน้าต่างๆ ใน application ของคุณ. Pages นี้สามารถหาเจอได้ภายใต้โฟลเดอร์ src ใน Ionic project ของคุณ.
เราจะยกตัวอย่างการแก้ไขอย่างง่ายใน Ionic app, ด้วยการแก้ไขที่ home page. เพื่อที่จะทำเช่นนั้น, เลือกไปที่ไฟล์ home.html ใน src/pages/home และแก้ไขไฟล์ตามนี้:
1 |
<ion-header>
|
2 |
<ion-navbar>
|
3 |
<ion-title>My Home</ion-title> |
4 |
</ion-navbar>
|
5 |
</ion-header>
|
6 |
|
7 |
<ion-content padding> |
8 |
<h2>Welcome to My Ionic App!</h2> |
9 |
<p>
|
10 |
This is super awesome. |
11 |
</p>
|
12 |
<p>
|
13 |
This is my 1st Ionic app ever. |
14 |
</p>
|
15 |
</ion-content>
|
เสร็จจากนั้น, ไปที่ไฟล์ home.scss, ซึ่งอยู่ใน src/pages/home, และแก้ไขตามนี้:
1 |
page-home { |
2 |
|
3 |
ion-content { |
4 |
background: black !important; |
5 |
}
|
6 |
|
7 |
h2 { |
8 |
color: white; |
9 |
}
|
10 |
|
11 |
p { |
12 |
color: white; |
13 |
}
|
14 |
|
15 |
}
|
ในที่นี้, เราเปลี่ยนพื้นสีของหน้า home page จากสีขาวเป็นสีดำระบุไปที่ ion-content. ซึ่งคือที่ที่บรรจุเนื้อหาของ page เอาไว้. นอกจากนี้, เรายังระบุไปที่ h2 ซึ่งเป็น header element รวมทั้งส่วน p (ย่อหน้า) elements และเปลี่ยนสีของตัวอักษรทั้งคู่เป็นสีขาว.
เมื่อคุณเปลี่ยนเรียบร้อยแล้ว(อย่าลืมบันทึกไฟล์ด้วยล่ะ), ใช้ได้ทั้งคำสั่ง ionic serve หรือ ionic lab จาก command line. สิ่งนี้เป็น Ionic CLI tools ที่ใช้ compile และใช้เพื่อทดสอบ app ของคุณ.จากตัวอย่างนี้ผู้เขียนจะใช้คำสั่ง ionic lab.
ทันที่ที่คุณใช้คำสั่งทั้งสองสำเร็จ, local development server ของคุณแสดง application ของคุณขึ้นมา, และหน้าตามันควรจะเป็นแบบนี้:
โครงสร้างของ Ionic Page
เราได้แก้ไข home page ด้วยการแก้ไขตัวอักษร รวมทั้งสีพื้นหลังของ page. แล้วเราทำมันได้ยังไง? โฟลเดอร์ home page ของเราประกอบด้วย 3 ไฟล์: home.html, home.scss และ home.ts
ไฟล์ home.ts คือ ไฟล์ TypeScript ที่ประกอบด้วย Angular component ด้วยรูปแบบของ component decorator:
1 |
@Component({ |
2 |
selector: 'page-home', |
3 |
templateUrl: 'home.html' |
4 |
})
|
ไฟล์ home.html ทำหน้าที่เป็น component template, ซึ่งเราสามารถใช้เพื่อเปลี่ยนเนื้อหาใน home page. มันถูกระบุด้วย parameter templateUrl ลงใน component decorator.
ในการเปลี่ยน style ของ home page, เราสามารถใช้ CSS หรือ SCSS ในไฟล์ home.scss ได้.
สร้าง Pages เพิ่มเติม
ต่อไป, เราจะสร้าง page เพิ่มเติมใน application ของเรา ที่ชื่อว่า info. เพื่อที่จะสร้าง page ใหม่, เราต้องใช้คำสั่งนี้ในโปรเจค: ionic generate page info ใน Visual Studio Code, เราสามารถใช้ command line ได้ด้วยการเปิดจาก View > Integrated Terminal. พิมพ์คำสั่งและกด Enter.
คำสั่งนี้จะ generate page ใหม่ในโปรเจคของคุณ, ด้วยไฟล์ info.html, info.ts และ info.scss.
หลังจากที่ page ถูก generate มาเรียบร้อยแล้ว, คุณควรจะเห็นมันในโฟลเดอร์ pages ที่โปรเจคของคุณ. ในการที่เราจะสามารถใช้ page ใหม่ที่เราสร้างนี้ได้, เราจะต้อง register มันที่ไฟล์ app.module.ts เสียก่อน. คุณสามารถเจอมันได้ในโฟลเดอร์ src/app
เริ่มแรก, เพิ่ม import statement สำหรับ page component ของ info ที่อยู่ในส่วนบนของไฟล์ app.module.ts
1 |
import { InfoPage } from '../pages/info/info'; |
คุณสามารถเพิ่ม pages อื่นๆ ข้างใต้ import statements ได้.
ถัดมา, เพิ่ม InfoPage ไปที่ declarations และ entryComponents arrays ของ app module ของคุณ. การกำหนด @NgModule ของคุณควรจะมีหน้าตาแบบนี้:
1 |
@NgModule({
|
2 |
declarations: [ |
3 |
MyApp, |
4 |
AboutPage, |
5 |
ContactPage, |
6 |
HomePage, |
7 |
TabsPage, |
8 |
InfoPage |
9 |
], |
10 |
|
11 |
//... |
12 |
|
13 |
entryComponents: [ |
14 |
MyApp, |
15 |
AboutPage, |
16 |
ContactPage, |
17 |
HomePage, |
18 |
TabsPage, |
19 |
InfoPage |
20 |
], |
21 |
|
22 |
//... |
Navigation ใน Ionic
มันเป็นวิธีการที่แสนจะเรียบง่าย, Ionic ใช้การ pushes และ pops pages เป็นหลักการของ navigation. แนวความคิด คือ เรา stacking pages ไว้อยู่ด้านบนของอีก page -- เมื่อเราเปิด page ใหม่, เราจะ push มันลงบน stack, และเมื่อเรากลับไปยังหน้าก่อนหน้านี้, เราก็ pop เพื่อปัจจุบันออก.
ดังนั้นเมื่อคุณดูที่ page ใน Ionic application, คุณจะเห็น page บนสุดของ stack, และถ้าคุณคลิกที่หน้าอื่น, คุณจะ pushing page นี้ไปคลุมไปที่ส่วนบนสุดของ stack ของ page ก่อนหน้านี้ใน view.
ถ้าคุณกลับไปยัง page ก่อนหน้านี้, คุณจะ poping page ปัจจุบันออกจาก stack และดู page ที่อยู่ด้านล่าง. ให้คิดเหมือนว่ามันเป็นชั้นของการ์ด, ที่คุณสามารถเพิ่มและลดการ์ดได้จากชั้น.
เพิ่มปุ่ม Navigation
ดำเนินการต่อด้วยตัวอย่าง, จากที่เราได้สร้าง page และ register มันไว้ใน application ของเรา, มาเริ่มติดตั้งการนำทางไปยัง page ใหม่ของเราจากหน้า home page กันเลย.
ใช้ home page ที่เราเพิ่งแก้ไขไปก่อนหน้านี้, ปรับปรุงมันด้วยการเพิ่มปุ่ม ซึ่งเอาไว้เพื่อนำทางไปยัง info page. เพิ่ม code ตามนี้ที่ไฟล์ home.html, ใน ion-content และข้างใต้ย่อหน้า:
1 |
<button ion-button>Navigate to Info</button> |
code ด้านบนระบุถึง Ionic component, ที่ชื่อว่า ion-button. หลังจากนี้เราจะเพิ่มการจัดการการคลิก เพื่อนำทางไปยัง info page เมื่อมีการคลิก.
home page ของคุณควรมีหน้าตาประมาณนี้:
อย่างไรก็ตาม, ถ้าเราคลิกที่ปุ่มที่เราเพิ่งสร้างในตอนนี้, มันจะยังไม่มีการทำงานใดๆ. สิ่งที่จะทำถัดไป, เราต้องเพิ่ม click listenr event ตามลงไป ด้วย function ลงบนปุ่ม:
1 |
<button ion-button (click)="navigateToInfo()">Navigate to Info</button> |
ต่อไป, กำหนด function การเราเขียนไว้ข้างบน, navigateToInfo(), ที่ไฟล์ home.ts. สิ่งแรก, import NavController helper จาก ionic-angular core library. NavController อนุญาตให้เราจัดการการนำทางใน Ionic application ของเรา, และเราใช้มัน push info page ไปยังส่วนบนของ home page เมื่อปุ่มถูกคลิก.
เราต้อง import InfoPage component เข้าไปด้วย. วางบรรทัดนี้ไว้ที่ส่วนบนของไฟล์ home.ts
1 |
import { NavController } from 'ionic-angular'; |
2 |
import { InfoPage } from '../info/info'; |
ต่อไป, เราจะแก้ไข home page component เพื่อรับ instance ของ NavController ผ่าน dependency injection. เปลี่ยนโครงสร้างของ home page ตามนี้:
1 |
constructor(public navCtrl: NavController) { |
2 |
}
|
สุดท้าย, เราสามารถกำหนด navigateToInfo function ใน HomePage componente ได้.
1 |
navigateToInfo() {
|
2 |
this.navCtrl.push(InfoPage) |
3 |
} |
ที่เราทำทั้งหมดนี้ คือ push reference ไปที่ info page component ไปยัง NavController.
ปรับปรุง Info Page
เมื่อทำด้านบนเสร็จแล้ว, ทั้งเปลี่ยนหน้าไปที่ info.html page, และ เพิ่มหัวข้อไปที่ ion-header. ประมาณนี้ <h2>This is awesome...</h2>.
ขณะนี้, ถ้าคุณ run application และคลิกที่ปุ่ม Navigate to Info ที่หน้า home page, คุณจะเห็นหน้า info page ที่เพิ่งสร้างใหม่. รวมทั้งปุ่มกลับ, ซึ่งถูกสร้างให้อัตโนมัติโดย Ionic.
ขอแสดงความยินดีด้วย! คุณทำสำเร็จแล้วในการสร้างและนำทางไปยัง page ใหม่. ลองสร้าง page อื่นๆใน demo โปรเจคนี้ ตามสบายได้เลยตามขั้นตอนคุณได้เคยทำมา.
สรุปผล
จนถึงซีรีย์นี้, เราได้จัดการด้วยการสร้าง Ionic โปรเจคใหม่, สร้าง page ใหม่, แก้ไขเนื้อหาข้างใน pages, และติดตั้ง navigation. ถึงตอนนี้เราได้เรียนรู้ถึงหลักการหลักๆ ที่จะช่วยให้เราสามารถพัฒนา Ionic application ของเราต่อไปได้.
ในขณะที่คุณอยู่ที่นี่ ลองดูบางโพสเกี่ยวกับการพัฒนา Ionic app!
