[Angular2#4] จัดการเส้นทางด้วย Routing และ เข้าถึงข้อมูลผ่าน Service

การสร้างแอพพลิเคชันด้วย Angular2 ต้องประกอบด้วยโมดูลอย่างน้อยหนึ่งโมดูลที่เป็นโมดูลหลักของแอพพลิเคชันเรา เราสามารถสร้างคอมโพแนนท์และใช้งานคอมโพแนนท์เหล่านั้นเพื่อแสดงผลผ่านทางเทมเพลตได้ อาศัยความสามารถของ decorator และ metadata ทำให้คลาสธรรมดาของเรากลายร่างเป็นส่วนต่างๆของ Angular2 ได้ตามที่เราต้องการ นั่นคือทั้งหมดที่เราพูดถึงกันในบทความที่แล้ว

หากแอพพลิเคชันเรามีเพจเดียวย่อมจืดชืด บทความนี้จึงจำใจเกิดขึ้นเพื่อแนะนำให้เพื่อนๆรู้จักกับ routing หรือการจัดการเส้นทางใน Angular2 ก่อนเรื่องราวจะดำเนินต่อไป พวกเธอว์จงทำให้ชัดว่าได้อ่านบทความเหล่านี้ดีแล้ว~

• รู้จัก Angular 2 โครงสร้างและคอนเซ็ปต์ของแอพพลิเคชันใน Angular 2
• สร้าง Module และ Component ด้วย Angular2

วิเคราะห์เส้นทางในวิกิ

ถ้าเพื่อนๆทำตามบทความที่แล้วหน้าสุดท้ายที่เราได้ควรเป็นแบบนี้ครับ

เราจะลงมือทำให้ปุ่ม All Pages ด้านขวาบนของเราตลิกได้กัน แน่นอนครับแค่คลิกเฉยๆคงไม่มีความหมายใดๆ แต่เราจะให้แสดงวิกิทั้งหมดออกมาด้วย ทั้งนี้ URL ของเราต้องเปลี่ยนเป็น http://localhost:4200/pages เช่นเดียวกัน

URL ต่างๆที่เราจะใช้ในแอพพลิเคชันนี้เป็นดังนี้ครับ

1/               แสดงหน้า Homepage
2/pages          ดู wiki page ทั้งหมด
3/pages/:id      ดู wiki หน้าที่มี ID ตามที่ระบุ
4/pages/:id/new  สร้าง wiki หน้าใหม่
5/pages/:id/edit แสดงหน้าแก้ไข wiki ที่มี ID ตามที่ระบุ
6/about          แสดงหน้า about

โดยหน้าเพจที่จะแสดงเมื่อ URL เปลี่ยนไปเป็นไปตามรูปข้างล่างนี้เลยครับ

Wiki ของเราจะมีส่วนหลักๆคือหน้า Homepage, หน้า Pages, หน้า Page และหน้า About ครับ ในส่วนของ Page นั้นเราต้องสามารถทำการดู Wiki Page ได้ทั้งหมด สามารถสร้าง Page ใหม่ได้รวมถึงสามารถแก้ไขได้ด้วย แต่ไม่อนุญาตให้ลบ

จะเห็นว่าแอพพลิเคชันของเราเต็มไปด้วยเส้นทาง (Route) ในการวิ่งไปมาระหว่างหน้าเพจ เราจึงต้องอาศัยตัวควบคุมเส้นทาง (Router) ในการจัดการการเปลี่ยนหน้าเพจ และพระเอกของเราที่จะมาช่วยจัดการเรื่องนี้คือสื่งที่บรรจุอยู่ในโมดูล RouterModule นั่นเอง

เพื่อให้การจัดการเส้นทางใน Angular2 ของเราลื่นไหนจนหัวแตก เราจึงต้องนำเข้า RouterModule และติดตั้งมันไว้กับ app.module.ts ของเรา

1import { ApplicationRef, NgModule } from '@angular/core'
2import { BrowserModule } from '@angular/platform-browser'
3import { CommonModule } from '@angular/common'
4import { FormsModule } from '@angular/forms'
5// RouterModule ฉันเลือกนาย~
6import { Routes, RouterModule } from '@angular/router'
7
8import { AppComponent } from './app.component'
9import { HomeComponent } from './home/home.component'
10import { HeaderComponent } from './shared/header/header.component'
11
12const appRoutes: Routes = [
13  // เราจะนิยาม Route หรือเส้นทางของเราในนี้
14  // เช่น
15  // { path: 'pages', component: PageListComponent },
16  // เพื่อบอกว่าเมื่อไหร่ที่เข้ามาจาก /pages ให้วิ่งไปใช้บริการคอมโพแนนท์ชื่อ PageListComponent
17]
18
19@NgModule({
20  declarations: [AppComponent, HomeComponent, HeaderComponent],
21  imports: [
22    BrowserModule,
23    CommonModule,
24    FormsModule,
25    // จ๊ะเอ๋
26    RouterModule.forRoot(appRoutes),
27  ],
28  providers: [],
29  entryComponents: [AppComponent],
30  bootstrap: [AppComponent],
31})
32export class AppModule {}

โรงพยาบาลแห่งหนึ่งมีพนักงานต้อนรับหน้าทางเข้าเป็นสาวสวยคนหนึ่ง ทุกครั้งที่ผู้ป่วยเข้าโรงพยาบาลก็จะถามทางเธอว่าไปแต่ละแผนกทางไหน เพื่อนๆจะเห็นว่าเส้นทางที่จะไปแต่ละแผนกนั้นมีหลายทาง ในขณะที่คนบอกทางสามารถมีได้คนเดียว

เปรียบผู้ป่วยเหมือนเว็บบราวเซอร์ครับ ถ้าเราอยากไป /pages แต่มืดบอดไม่รู้จะไปทางไหน พนักงานสาวต้อนรับที่เป็น Router จะช่วยตอบคำถามนี้ให้เพื่อเลือกหนทางที่สว่างให้กับคุณ เส้นทาง (Route) นั้นมีหลายทางแต่เมื่อ Router สาวแสนสวยกำหนดเส้นทางให้แล้ว เบราเซอร์อย่างคุณก็มีแต่ต้องไปตามเส้นทางนั้น สุดท้ายคุณจะได้พบกับแผนกหรือคอมโพแนนท์ที่คุณต้องใช้ในการแสดงผลนั่นเอง

ถึงเวลาชำแหละไฟล์ app.module.ts ที่เราเพิ่ม RouterModule เข้าไปกันแล้ว เริ่มจาก

1import { Routes, RouterModule } from '@angular/router'

ถ้าไม่มีเส้นทางให้เดินทาง ต่อให้มีพนักงานแสนสวยยืนหลอกล่อให้เดินไปก็ไปไหนไม่ได้ เราจึงต้องประกาศเส้นทางหรือ Routes ขึ้นมาก่อน

1const appRoutes: Routes = []

เส้นทางของเรามีหลายเส้น เราจึงต้องเก็บในอาร์เรย์ แต่ละเส้นทางประกอบด้วย path และ component เช่น

1const appRoutes: Routes = [{ path: 'pages', component: PageListComponent }]

Routes หรือเส้นทางจากตัวอย่างบนมีหนึ่งเดียวคือเส้นทางสำหรับ pages เมื่อเบราเซอร์เข้าถึง /pages ตัว Router หรือพนักงานต้อนรับของเราจะคอยบอกให้ว่าคอมโพแนนท์ไหนคือปลายทางของเรา ในที่นี้ก็คือคอมโพแนนท์ PageListComponent นั่นเอง

ถึงแม้เราจะมีเส้นทางแล้ว แต่หาก root module ของเราไม่รู้จักก็เท่านั้น เราจึงต้องสถาปนาให้ root module ของเรารับรู้ผ่าน RouterModule.forRoot()

1imports: [
2  BrowserModule,
3  CommonModule,
4  FormsModule,
5  // จ๊ะเอ๋
6  // root module เอ๊ย
7  // เจ้าจงรู้ถึงการมีอยู่ของบรรดา routes ใน appRoutes ซะ
8  RouterModule.forRoot(appRoutes)
9],

app.routing.ts

ลองจินตนาการเมื่อเส้นทางของเรามีซัก 10 ตัว ไฟล์ app.module.ts ของเราก็จะเริ่มบวมใช่ไหมครับ ทั้งๆที่ชื่อของมันคือ module แต่ทำไมมันต้องรับรู้ด้วยหละว่าการจัดการเส้นทางคืออะไร? แบบนี้ไม่ดีแน่เราควรแยกการจัดการเส้นทางของเราออกมาอีกไฟล์ และนั่นหละครับคือ app.routing.ts ที่เรากำลังจะสร้างขึ้นมา

1import { ModuleWithProviders } from '@angular/core'
2import { Routes, RouterModule } from '@angular/router'
3
4const appRoutes: Routes = []
5
6// เรา export ตัวแปรประเภทค่าคงที่ (const) ชื่อ routing ออกไป
7// routing นี้เป็นผลลัพธ์จากการเรียก RouterModule.forRoot(appRoutes)
8// โดย routing ของเราเป็น ModuleWithProviders
9// เพื่อนๆคนไหนไม่เข้าใจว่าทำไมเราต้องเขียน routing: ModuleWithProviders
10// แนะนำให้อ่าน ชุดบทความสอนใช้งาน TypeScript ที่ https://www.babelcoder.com/blog/series/typescript ครับ
11export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes)

แน่นอนว่าเพื่อให้ root module ของเรารับรู้ถึงการมีอยู่ของเส้นทางเหล่านี้ เราต้องเพิ่ม routing จาก app.routing.ts เข้าไปเป็นส่วนหนึ่งของโมดูลเรา

1import { ApplicationRef, NgModule } from '@angular/core'
2import { BrowserModule } from '@angular/platform-browser'
3import { CommonModule } from '@angular/common'
4import { FormsModule } from '@angular/forms'
5
6// ตรงนี้
7import { routing } from './app.routing'
8import { AppComponent } from './app.component'
9import { HomeComponent } from './home/home.component'
10import { HeaderComponent } from './shared/header/header.component'
11
12@NgModule({
13  declarations: [AppComponent, HomeComponent, HeaderComponent],
14  imports: [
15    BrowserModule,
16    CommonModule,
17    FormsModule,
18    // และตรงนี้
19    routing,
20  ],
21  providers: [],
22  entryComponents: [AppComponent],
23  bootstrap: [AppComponent],
24})
25export class AppModule {}

รู้จักกับ Router Outlet

ก่อนหน้านี้เราไม่มีการใช้ Router เพื่อจัดการเส้นทางกันเลย แต่ทำไม Angular2 ถึงนำ HomeComponent มาแสดงผลได้อย่างถูกต้อง เมื่อเราเข้าถึงด้วย /

app.module.ts ของเรานิยามไว้ว่า bootstrap component หรือคอมโพแนนท์เริ่มต้นคือ AppComponent เมื่อ Angular2 ทำงาน AppComponent จึงถูกทำและแสดงผลด้วยเทมเพลตของมัน

1@NgModule({
2  declarations: [
3    AppComponent,
4    HomeComponent,
5    HeaderComponent,
6    PageListComponent
7  ],
8  imports: [
9    BrowserModule,
10    CommonModule,
11    FormsModule,
12    routing
13  ],
14  providers: [],
15  entryComponents: [AppComponent],
16  // ข้าอยู่นี่
17  bootstrap: [AppComponent]
18})

ภายในเทมเพลตของ AppComponent (app.component.html) เราบอกให้มันนำ HomeComponent มาเป็นส่วนหนึ่งของการแสดงผลด้วยผ่านการเรียก <app-home> จึงไม่แปลกที่เราสามารถแสดงผล HomeComponent ออกมาได้อย่างสวยงาม

1<app-header></app-header>
2<app-home></app-home>

แต่ตอนนี้สถานการณ์ของเราเปลี่ยนไปแล้ว เราไม่อยากให้ AppComponent ของเรายึดติดอยู่กับ HomeComponent อีกต่อไป เราอยากให้ AppComponent ของเรายืดหยุ่นมากขึ้น เมื่อมีผู้ร้องขอ / เข้ามาค่อยนำ HomeComponent มาแสดง แต่ถ้ามีคนร้องขอ /pages ให้นำ PageListComponent มาแสดงแทน เหตุนี้เราจึงมิอาจใช้ <app-home> ใส่ไปใน app.component.html ได้อีกต่อไป

RouterOutlet คือวีรบุรุษที่ช่วยกอบกู้สถานการณ์ของเรา เมื่อเรามีการตั้งค่าเส้นทาง (routes) เรียบร้อยแล้ว ตัว Router จะเป็นผู้จัดการเส้นทางนั้นให้ โดยจะพิจารณาเลือกคอมโพแนนท์ที่เหมาะสมตามแต่ path ที่เข้ามา เมื่อเลือกคู่ครองได้แล้วคอมโพแนนท์นั้นก็จะแสดงผลใน RouterOutlet

เปลี่ยน app.component.html ของเราเพื่อให้มีการใช้ RouterOutlet ดังนี้

1<app-header></app-header> <router-outlet></router-outlet>

เราจะเรียกคอมโพแนนท์ที่มีการใช้งาน RouterOutlet เพื่อแสดงผลคอมโพแนนท์ที่สัมพันธ์กับ path ใน URL ว่า Routing Component

เนื่องจากผู้เขียนอยากจัดสไตล์ให้กับคอมโพแนนท์ที่จะแสดงผลใต้ RouterOutlet ซะหน่อย จึงขอเพิ่ม div และคลาสบางตัวดังนี้

1<app-header></app-header>
2<div class="container">
3  <div class="content">
4    <router-outlet></router-outlet>
5  </div>
6</div>

จัดการเพิ่มสไตล์อย่างมีสีสันที่ app.component.scss

1.container {
2  width: 50%;
3  margin: 0 auto;
4}
5
6.content {
7  margin-top: 4rem;
8}

ก่อนที่เราจะกลับไปดูที่เว็บเบราเซอร์กัน เราลืมอะไรไปบางอย่างใช่ไหม.. แน่นอน เรายังไม่ได้เพิ่ม route ให้หน้า homepage ของเราเลย จัดการเปิด app.routing.ts ขึ้นมาแล้วปรับแต่งดังนี้ครับ

1import { ModuleWithProviders } from '@angular/core'
2import { Routes, RouterModule } from '@angular/router'
3
4import { HomeComponent } from './home/home.component'
5
6const appRoutes: Routes = [
7  // ถ้าไม่ระบุ path อะไรเข้ามา (เข้ามาด้วย /) เช่น http://localhost:4200
8  // ขอให้ปลุก HomeComponent ขึ้นมาใส่ใน RouterOutlet ของ app.component.html
9  { path: '', component: HomeComponent },
10]
11
12export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes)

เท่านี้ก็เรียบร้อย เข้าหน้า http://localhost:4200 เพื่อนๆควรจะพบกับหน้าโฮมเพจของเราแบบนี้ครับ

จัดการ /pages เส้นทางที่สองของเรา

ถึงเวลาที่เราจะเพิ่มเส้นทางให้กับ /pages แล้วครับ เมื่อไหร่ก็แล้วแต่ที่เราเข้าที่ /pages ขอให้ Router ช่วยปลุก PageListComponent ขึ้นมาทำงาน แน่นอนครับว่าคอมโพแนนท์ตัวนี้ต้องมีเทมเพลตที่สัมพันธ์กับมัน เป็นผลให้หน้าเพจดังรูปข้างล่างปรากฎตัวออกมา

เริ่มจากเพิ่มคอมโพแนนท์ PageListComponent ของเราผ่านคำสั่งนี้ครับ หากใครออกคำสั่งแล้วขึ้นข้อผิดพลาดว่า "src\app\pages"" is not a valid path. ให้ทำการสร้างโฟลเดอร์ src/app/pages ขึ้นมาก่อนครับ

1$ ng g component pages/page-list

เมื่อออกคำสั่งดังกล่าวเราก็จะได้โครงสร้างไฟล์ของเราแบบนี้

1app
2|------ pages
3        |------ page-list
4                |------ page-list.component.scss
5                |------ page-list.component.html
6                |------ page-list.component.spec.ts
7                |------ page-list.component.ts
8                |------ index.ts
9                |------ shared
10                        |------ index.ts

จุดนี้เป็นหลักการสร้างโฟลเดอร์ที่อยากให้เพื่อนๆเรียนรู้ครับ ก่อนที่เราจะลงมือสร้างโฟลเดอร์เพื่อยัดคอมโพแนนท์ใดๆลงไป ขอให้เพื่อนๆตั้งคำถามในใจก่อนว่าสิ่งที่กำลังจะสร้างเป็นฟีเจอร์หรือคุณสมบัติหลักอันหนึ่งของแอพพลิเคชันเราไหม

pages เป็นคุณสมบัติหนึ่งของแอพพลิเคชันเรา เราจึงสร้างโฟลเดอร์แยกออกมาชื่อ pages และแน่นอนว่า page-list ที่ใช้แสดงหน้าเพจทั้งหมดเป็นคุณสมบัติย่อยของ pages เราจึงสร้างโฟลเดอร์ page-list ไว้ภายใต้ pages อีกทีนึง ในอนาคตหากเรามี page-detail สำหรับใช้แสดงหน้าวิกิย่อยแต่ละตัว เราก็สามารถวางไว้ใต้ pages ได้ เพราะถือว่ามันคือคุณสมบัติย่อยที่ pages สามารถทำได้

มุมมองกลับกัน ถ้าเพื่อนๆมองว่าคุณสมบัติหลักคือ page-list เพื่อนๆก็สามารถสร้าง page-list ไว้ใต้ app ได้โดยตรง ไม่ต้องขึ้นตรงเป็นทาสรับใช้ของ pages

ด้วยหลักการสร้างโฟลเดอร์โดยคำนึงถึงคุณสมบัติหรือ feature เป็นสำคัญนี้เราจะเรียกว่า Folders-by-Feature เมื่อไหร่ก็ตามที่เราเริ่มเห็นว่า pages ของเราใหญ่พอควร เราสามารถแยก pages ของเราออกเป็นอีกโมดูลที่อิสระได้ครับ

กฎเหล็กข้อที่ 1: จงสร้างโครงสร้างไฟล์แบบ Folders-by-Feature

ทำการเพิ่ม PageListComponent เข้าไปใน root module ของเรา เพื่อให้ตลอดทั้งแอพพลิเคชันเรารับรู้ถึงการมีอยู่ของคอมโพแนนท์นี้

1// app.module.ts
2import { ApplicationRef, NgModule } from '@angular/core'
3import { BrowserModule } from '@angular/platform-browser'
4import { CommonModule } from '@angular/common'
5import { FormsModule } from '@angular/forms'
6
7import { routing } from './app.routing'
8import { AppComponent } from './app.component'
9import { HomeComponent } from './home/home.component'
10import { HeaderComponent } from './shared/header/header.component'
11// import ตรงนี้ครับ
12import { PageListComponent } from './pages/page-list/page-list.component'
13
14@NgModule({
15  declarations: [
16    AppComponent,
17    HomeComponent,
18    HeaderComponent,
19    // เรียกใช้งานตำแหน่งนี้
20    PageListComponent,
21  ],
22  imports: [BrowserModule, CommonModule, FormsModule, routing],
23  providers: [],
24  entryComponents: [AppComponent],
25  bootstrap: [AppComponent],
26})
27export class AppModule {}

เมื่อเราเข้าถึง /pages เราก็อยากให้ Router ช่วยพา PageListComponent ไปใส่ใน RouterOutlet ซะหน่อย ดังนั้นเราจึงต้องทำการตั้งค่าเส้นทางของเราแบบนี้ใน app.routing.ts

1import { ModuleWithProviders } from '@angular/core'
2import { Routes, RouterModule } from '@angular/router'
3
4import { PageListComponent } from './pages/page-list/page-list.component'
5import { HomeComponent } from './home/home.component'
6
7const appRoutes: Routes = [
8  { path: '', component: HomeComponent },
9  // เมื่อเข้าถึง /pages
10  // ให้นำ PageListComponent ไปแสดงผลใน RouterOutlet ของ AppComponent
11  { path: 'pages', component: PageListComponent },
12]
13
14export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes)

สิ่งสุดท้ายที่เราจะกระทำต่อหน้าเพจอันจืดชืดของเราก็คือ เสกเวทมนตร์ใส่ลิงก์ All Pages ทางมุมขวาบนให้สามารถคลิกได้และนำเราไปสู่ /pages อย่างแท้จริง

ทักทาย Router Links

Route สำหรับ /pages เราก็มีแล้ว ตอนนี้เราอยากให้การคลิก All Pages นำเราไปสู่การแสดงผล PageListComponent หรือพูดง่ายๆก็คือการคลิก All Pages ต้องนำพาเราไปสู่ Route ที่มีชื่อว่า /pages นั่นเอง

ด้วยความสามารถของ directive ตัวหนึ่งที่ชื่อว่า RouterLink ทำให้เราสามารถระบุได้ว่าหลังการคลิกแท็ก a แล้วจะให้เปลี่ยนเส้นทางไปยังเส้นทางไหน

ตอนนี้ All Pages ของเราอยู่ในส่วนของ HeaderComponent เราจึงเปิด header.component.html ขึ้นมาเพื่อให้ความสามารถที่ต้องการเกิดขึ้น

1<header class="header">
2  <nav>
3    <a href="javascript:void(0)" class="brand">Babel Coder Wiki!</a>
4    <ul class="menu">
5      <li class="menu__item">
6        <a routerLink="/pages" routerLinkActive="active" class="menu__link">
7          All Pages
8        </a>
9      </li>
10      <li class="menu__item">
11        <a href="javascript:void(0)" class="menu__link">
12          About Us
13        </a>
14      </li>
15    </ul>
16  </nav>
17</header>

เอาหละครับต่อไปนี้คือจุดที่เพื่อนๆควรให้ความสนใจเป็นพิเศษ

1<a routerLink="/pages" routerLinkActive="active" class="menu__link">
2  All Pages
3</a>

นี่เป็นการบอกว่าเมื่อไหร่ที่เราคลิก All Pages ขอให้ Router เธอจงช่วยนำพาเราสู่ /pages ทีเถอะ

จากตัวอย่างข้างบน เพื่อนๆน่าจะเห็น directive โผล่ขึ้นมาอีกตัวนึงครับนั่นคือ RouterLinkActive directive ตัวนี้มีหน้าที่กำกับแท็ก a ของเรา เมื่อไหร่ก็ตามที่ URL ของเราอยู่ที่ path ที่กำหนดไว้ (ในที่นี้คือ /pages) RouterLinkActive จะเพิ่มชื่อ CSS class ให้ตามที่เรากำหนด (ในที่นี้คือ active) และถอนชื่อคลาสนั้นออกเสียเมื่อเราไม่ได้อยู่ที่ path นั้น

ถึงตอนนี้แล้วก็อย่ารอช้าครับ เข้าไปที่ http://localhost:4200 แล้วจิ้มพรวดไปที่ All Pages ซะ! ถ้าทุกอย่างถูกต้อง เพื่อนๆต้องเห็นข้อความ page-list works! ครับ

การสร้างคลาสเพื่อเป็นตัวแทนของโมเดล

เราต้องการให้หน้า /pages แสดงวิกิทั้งหมดที่เรามี แต่ตอนนี้เรายังไม่มีข้อมูลที่จะนำมาแสดงเลย ดังนั้นเราจะสร้าง Page ขึ้นมาก่อน เพื่อให้เป็นตัวแทนของหน้าวิกิหนึ่งหน้า จากนั้นเมื่อเราพูดถึงวิกิทั้งหมดมันจึงหมายถึงอาร์เรย์ของ Page หรือก็คือ Page[] นั่นเอง

สร้างคลาส Page เพื่อเป็นตัวแทนของวิกิหนึ่งเพจของเราด้วยคำสั่งในการสร้างคลาสดังนี้ครับ ถ้าเจอข้อความ "src\app\pages\shared is not a valid path. ให้สร้างโฟลเดอร์ src/app/pages/shared ขึ้นมาก่อนออกคำสั่งครับ

1$ ng g class pages/shared/page

หลังการออกคำสั่งข้างต้น เพื่อนๆจะได้ไฟล์ใหม่ใต้โครงสร้างไฟล์ดังนี้

1src/app/pages
2|------ shared
3        |------ page.spec.ts
4        |------ page.ts

page.ts ของเราจะใช้ร่วมกันในหลายๆที่ภายใต้ฟีเจอร์เดียวกันคือ pages ดังนั้น page.ts จึงควรอยู่ภายใต้โฟลเดอร์ pages/shared

กฎเหล็กข้อที่ 2: จงสร้างไฟล์ที่ใช้ร่วมกันใน feature นั้นๆในโฟลเดอร์ shared

เนื่องจาก page.ts ของเราเป็นคลาสที่ทำหน้าที่เป็นโมเดล ตามหลักการตั้งชื่อไฟล์ของ Angular2 คือ <ชื่อ>.<หน้าที่>.<ประเภท> เราจึงควรเปลี่ยนชื่อไฟล์เสียใหม่เป็น page.model.ts เพื่อเป็นการบอกว่าไฟล์ดังกล่าวทำหน้าที่เป็นโมเดลนั่นเอง

1เปลี่ยนชื่อไฟล์ต่อไปนี้
2
3page.ts      ---> page.model.ts
4page.spec.ts ---> page.model.spec.ts

หลังจากการเปลี่ยนแปลงไฟล์ เพื่อนๆจะได้โครงสร้างไฟล์ใหม่ดังนี้

1src/app/pages
2|------ shared
3        |------ page.model.spec.ts
4        |------ page.model.ts

ทำความรู้จัก Structural Directives

ถึงเวลาที่ข้อมูลวิกิของเราทั้งหมดต้องออกไปแสดงตัวทางหน้าจอแล้ว แต่... ไหนละข้อมูลเรา?

เพื่อให้เรามีข้อมูลพร้อมแสดงผล เราจะใส่ข้อมูลของเราลงไปใน page-list.component.ts ดังนี้ครับ

1import { Component, OnInit } from '@angular/core'
2import { Page } from '../shared/page'
3
4@Component({
5  selector: 'app-page-list',
6  templateUrl: 'page-list.component.html',
7  styleUrls: ['page-list.component.scss'],
8})
9export class PageListComponent implements OnInit {
10  // สร้าง property ชื่อ pages เพื่อเก็บค่าวิกิทั้งหมด
11  // pages ตัวนี้เทมเพลตของเราจะเข้าถึงได้
12  // เราจึงนำข้อมูลจาก pages ไปแสดงผลบนเทมเพลตของคอมโพแนนท์นี้ได้นั่นเอง
13  pages: Page[]
14
15  constructor() {}
16
17  // เมื่อ Angular2 เริ่มต้นทำงานคอมโพแนนท์นี้ ngOnInit จะถูกเรียกขึ้นมาทำงาน
18  ngOnInit() {
19    // ในการทำงานนี้เราให้มันตั้งค่าข้อมูลวิกิทั้งหมดของเราเป็น...
20    this.pages = [
21      {
22        id: 1,
23        title: 'test page#1',
24        content: 'TEST PAGE CONTENT#1',
25      },
26      {
27        id: 2,
28        title: 'test page#2',
29        content: 'TEST PAGE CONTENT#2',
30      },
31      {
32        id: 3,
33        title: 'test page#3',
34        content: 'TEST PAGE CONTENT#3',
35      },
36    ]
37  }
38}

เมื่อข้อมูลพร้อมก็ถึงเวลาแสดงผลแล้ว เราจะแสดงผลวิกิทั้งหมดของเราในรูปแบบตารางกันครับ และนี่คือโค๊ดที่เราจะใส่ใน page-list.component.html

1<table class="table">
2  <thead>
3    <tr>
4      <th>ID</th>
5      <th>Title</th>
6      <th>Action</th>
7    </tr>
8  </thead>
9  <tbody>
10    <tr *ngFor="let page of pages">
11      <td>{{page.id}}</td>
12      <td>{{page.title}}</td>
13      <td>{{page.action}}</td>
14    </tr>
15  </tbody>
16</table>

จุดน่าสนใจของเราอยู่ตรงนี้ครับ

1<tr *ngFor="let page of pages">
2  <td>{{page.id}}</td>
3  <td>{{page.title}}</td>
4  <td>{{page.action}}</td>
5</tr>

ในบางครั้งเรามักมีเงื่อนไขที่ใช้กำหนดการแสดงผล เช่น ถ้า page นั้นเป็น private ก็ขอให้ไม่แสดงผลออกมา หรือเรามีกลุ่มของวิกิทั้งหมดอยู่ใน pages เราอยากจะวนลูปรอบ pages เพื่อสร้างแถวในตารางตามแต่ละ page ที่อยู่ภายใต้ pages ที่เรามีอยู่

directive ที่ใช้ในการเปลี่ยนแปลงโครงสร้าง DOM เพื่อให้เกิดการเพิ่มหรือลบอีลีเมนต์ของ HTML ตามที่เราระบุนี้เรียกว่า Structural Directive

ngFor เป็นหนึ่งใน structural directive ที่ใช้ในการวนลูปรอบ property ที่เราส่งเข้ามา เราใช้ ngFor เพื่อวนลูปรอบ pages ของเราซึ่งเป็น property ใน PageListComponent

1<tr *ngFor="let page of pages"></tr>

จากคำสั่งนี้ทำให้เกิดแท็ก tr ขึ้นตามจำนวนของ pages ที่มีอยู่ ในแต่ละรอบของการวนลูปรอบ pages จะมี page เกิดขึ้นมาเพื่อเป็นตัวแทนของแต่ละวิกิเพจ อาศัย page นี้เราสามารถแสดงข้อมูลภายใต้ page ออกมาได้ดังนี้

1<td>{{page.id}}</td>
2<td>{{page.title}}</td>
3<td>{{page.action}}</td>

เราแสดงผล id, title และ action ของ page ออกมาผ่าน {{}} เช่นเดียวกันครับถ้าเราอยากแสดงผลสิ่งอื่นออกมาเช่นผลลัพธ์จากการนำ 1 + 1 เราก็สามารถใส่ใน {{}} ได้เช่นกันเป็น {{1 + 1}}

ในหัวข้อนี้เราจะยังไม่ลงลึกถึงรายละเอียดต่างๆของ structural directive ครับ เพื่อนๆจะได้เรียนรู้อย่างละเอียดในบทความอื่นต่อไป

ก่อนที่เราจะลาหัวข้อนี้ มาเพิ่มสไตล์ให้กับตารางของเราเพื่อความฟรุ้งฟริ้งกันครับ แก้ไข page-list.component.scss ดังนี้

1@import '../../theme/variables';
2
3$border-style: 1px solid $gray1-color;
4
5.table {
6  border-collapse: collapse;
7  border-spacing: 0;
8  empty-cells: show;
9  border: $border-style;
10
11  td,
12  th {
13    border-left: $border-style;
14    border-width: 0 0 0 1px;
15    font-size: inherit;
16    margin: 0;
17    overflow: visible;
18    padding: 0.5rem 1rem;
19  }
20
21  thead {
22    background-color: $gray2-color;
23    color: $black-color;
24    text-align: left;
25    vertical-align: bottom;
26  }
27}

รู้จักกับ Service ใน Angular2

ลองย้อนกลับไปดู page-list.component.ts ของเรากันครับ

1export class PageListComponent implements OnInit {
2  pages: Page[]
3
4  constructor() {}
5
6  ngOnInit() {
7    this.pages = [
8      {
9        id: 1,
10        title: 'test page#1',
11        content: 'TEST PAGE CONTENT#1',
12      },
13      {
14        id: 2,
15        title: 'test page#2',
16        content: 'TEST PAGE CONTENT#2',
17      },
18      {
19        id: 3,
20        title: 'test page#3',
21        content: 'TEST PAGE CONTENT#3',
22      },
23    ]
24  }
25}

เราจะเห็นว่าตอนนี้เรายัดก้อนข้อมูลของวิกิทุกหน้าไว้ภายใต้ ngOnInit แน่นอนครับว่าถ้านี่คือคอมโพแนนท์ตัวเดียวของเราในระบบ มันก็ไม่น่าจะมีปัญหาอะไร แต่ถ้าเกิดวันนึงมีคอมโพแนนท์อื่นอยากใช้งาน pages เช่นเดียวกันหละ เราก็จะประกาศตัวแปร pages เพื่อเก็บค่าวิกิทุกเพจเช่นเดียวกับที่ทำในคอมโพแนนท์นี้เช่นนั้นหรือ?

การเข้าถึงข้อมูลไม่ใช่หน้าที่หลักของคอมโพแนนท์ครับ ดังนั้นเราจึงควรแยกการได้มาซึ่งข้อมูลออกไปจากคอมโพแนนท์ เพื่อให้คอมโพแนนท์ของเราโฟกัสเพียงหน้าที่เดียว ให้ง่ายต่อการทดสอบโปรแกรมด้วยเช่นกัน

เซอร์วิสคือก้อนข้อมูล ฟังก์ชัน หรืออะไรก็ได้ ขอเพียงให้เกิดมาเพื่อทำงานเฉพาะทางอะไรซักอย่างและทำให้ดีด้วยนะเออ งานที่สามารถเป็นเซอร์วิสได้ เช่น

• Logging Service สำหรับพิมพ์ log
• Data Service สำหรับดึงข้อมูลจากเซิร์ฟเวอร์

แน่นอนครับว่าก้อนข้อมูล pages ที่เราถือครองอยู่นี้ ความเป็นจริงแล้วต้องมาจากฝั่งเซิร์ฟเวอร์ที่เรายังไม่ได้สร้างในตอนนี้ เราจะย้ายก้อน pages ของเราออกจากคอมโพแนนท์ เพื่อให้มันไปสิงสถิตย์เป็นนางตานีอยู่ใน service ต่อไป

ออกคำสั่งเพื่อสร้าง service ตัวใหม่ดังนี้ครับ

1$ ng g service pages/shared/page

ผลจากคำสั่งข้างต้นเราจะได้โครงสร้างไฟล์ใหม่ดังนี้

1|------ src/app/pages/shared
2        |------ page.service.spec.ts
3        |------ page.service.ts

จากนั้นก็ใส่ก้อนข้อมูล pages ลงไปใน page.service.ts ได้เลย

1import { Injectable } from '@angular/core'
2
3@Injectable()
4export class PageService {
5  getPages() {
6    return [
7      {
8        id: 1,
9        title: 'test page#1',
10        content: 'TEST PAGE CONTENT#1',
11      },
12      {
13        id: 2,
14        title: 'test page#2',
15        content: 'TEST PAGE CONTENT#2',
16      },
17      {
18        id: 3,
19        title: 'test page#3',
20        content: 'TEST PAGE CONTENT#3',
21      },
22    ]
23  }
24}

แต่ช้าก่อน... ตามที่เราคุยกันข้างต้น pages ของเราความจริงแล้วมาจากเซิร์ฟเวอร์ครับ แม้ตอนนี้เราจะยังไม่มี API server ให้ดึงข้อมูลก็ตาม แต่เราก็ไม่ควร hard code เขียนก้อนข้อมูลลงไปตรงๆแบบนี้ใน service

เพื่อให้ service ของเราดูดีขึ้น เราจะสร้าง mock-pages ขึ้นมาเป็นตัวแทนจำลองการเก็บข้อมูลของเราผ่านการสร้างไฟล์ชื่อ pages/shared/mock-pages.ts

1|------ src/app/pages/shared
2        |------ mock-pages.ts

เปิดไฟล์ mock-pages.ts ขึ้นมาครับ เราจะลงมือย้าย pages ของเราไว้ในนี้

1import { Page } from './page.model'
2
3export const PAGES: Page[] = [
4  {
5    id: 1,
6    title: 'test page#1',
7    content: 'TEST PAGE CONTENT#1',
8  },
9  {
10    id: 2,
11    title: 'test page#2',
12    content: 'TEST PAGE CONTENT#2',
13  },
14  {
15    id: 3,
16    title: 'test page#3',
17    content: 'TEST PAGE CONTENT#3',
18  },
19]

ย้อนกลับไปที่ page.service.ts ของเรากันครับ ตอนนี้ service ของเราก็จะดูดีงามพระรามแปดมากขึ้นเช่นนี้

1import { Injectable } from '@angular/core'
2
3import { PAGES } from './mock-pages'
4
5@Injectable()
6export class PageService {
7  getPages() {
8    // ไม่มีการ hard code ใน service อีกต่อไป
9    // แต่ตอนนี้เราจะเข้าถึง pages จาก mock-pages แทน
10    return PAGES
11  }
12}

และเพื่อให้ตลอดทั้งโมดูลของเรารู้จัก service ตัวนี้ เราจึงต้องไปเพิ่ม service ของเราใน app.module.ts

1// อย่าลืม import เข้ามาก่อนครับ
2import { PageService } from './pages/shared/page.service'
3import { PageListComponent } from './pages/page-list/page-list.component'
4
5@NgModule({
6  declarations: [
7    AppComponent,
8    HomeComponent,
9    HeaderComponent,
10    PageListComponent,
11  ],
12  imports: [BrowserModule, CommonModule, FormsModule, routing],
13  providers: [
14    // ตรงนี้
15    PageService,
16  ],
17  entryComponents: [AppComponent],
18  bootstrap: [AppComponent],
19})
20export class AppModule {}

สุดท้ายเราก็ต้องเปลี่ยน page-list.component.ts ของเราเพื่อให้ดึงค่า pages มาจาก service แทนดังนี้

1import { Component, OnInit } from '@angular/core'
2
3import { PageService } from './pages/shared/page.service'
4import { Page } from '../shared/page'
5
6@Component({
7  selector: 'app-page-list',
8  templateUrl: 'page-list.component.html',
9  styleUrls: ['page-list.component.scss'],
10})
11export class PageListComponent implements OnInit {
12  pages: Page[]
13
14  constructor(private pageService: PageService) {}
15
16  ngOnInit() {
17    this.getPages()
18  }
19
20  getPages() {
21    this.pages = this.pageService.getPages()
22  }
23}

เมื่อเซอร์วิสเป็นที่ต้องการของคอมโพแนนท์เรา Angular2 จึงต้องมีกลไกในการส่งเซอร์วิสไปให้ถึงมือคอมโพแนนท์ที่ต้องการใช้งานเซอร์วิสนั้นๆ และนั่นคือสิ่งที่เราประกาศเป็นพารามิเตอร์ของ constructor ครับ

1constructor(private pageService: PageService) { }

เมื่อ Angular2 สร้างคอมโพแนนท์มันจะดูซิว่าคอมโพแนนท์นั้นต้องการเซอร์วิสอะไรบ้าง จากตัวอย่างของเรามีเพียง PageService เท่านั้นที่คอมโพแนนท์นี้ต้องการ Angular2 จะเริ่มโวยวายถามหาเซอร์วิสตัวนี้จาก injector

Injector จะเป็นผู้ดูแลกล่องเก็บเซอร์วิสใบหนึ่ง (container) ถ้าเซอร์วิสที่ Angular2 ร้องขอนั้นมีอยู่ใน container แล้วมันก็จะคืนเซอร์วิสนั้นจากในกล่องกลับไป หากไม่มี injector จะสร้างเซอร์วิสนั้นขึ้นมาใหม่ โยนใส่กล่อง พร้อมทั้งคืนค่าเซอร์วิสนั้นกลับไปให้ Angular2 และนี่หละครับคือกลไกของ dependency injection

ถ้าเราย้อนกลับไปดู page.service.ts ของเรา พบว่ามีการใส่ @Injectable() เอาไว้

1import { Injectable } from '@angular/core'
2
3@Injectable()
4export class PageService {
5  // ...
6}

Injectable จะเป็นตัวเปิดเผยให้ Injector สามารถนำ service นี้ไปสร้างไว้ใน container ได้

เมื่อเรามี pageService ไว้ใช้งานเรียบร้อยแล้ว เราจึงสามารถเรียกเมธอด getPages จาก service ดังกล่าวได้

1getPages() {
2  this.pages = this.pageService.getPages();
3}

ngOnInit ที่ทำงานเมื่อคอมโพแนนท์ถูกสร้างเพื่อใช้งาน จะเรียกใช้ getPages เป็นผลให้เมื่อคอมโพแนนท์ทำงานจะมีการดึงข้อมูล pages เกิดขึ้น

1ngOnInit() {
2  this.getPages();
3}

กลับไปดูที่ http://localhost:4200/pages อีกครั้ง เพื่อนๆควรจะพบหน้ารวมวิกิอันแสนสวยงามแบบนี้ครับ

บทความนี้เป็นเพียงการแนะนำให้รู้จักการใช้งาน Routing และ Service ใน Angular2 ที่ในความเป็นจริงแล้วยังมีรายละเอียดอีกมากครับ เพื่อนๆจะได้ศึกษาเรื่องนี้มากขึ้นในบทความถัดๆไป สำหรับเพื่อนๆที่ต้องการดูโค๊ดของบทความนี้ สามารถเข้าชมได้ที่นี่ครับ