จัดการ Routing ผ่าน Routing Module ใน Angular ตอนที่ 2

เขียนเมื่อ 6 ปีก่อน โดย Ninenik Narkdee
angular angular router routing module

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ angular angular router routing module

ดูแล้ว 7,962 ครั้ง


เนื้อหาต่อไปนี้ เราจะมารู้จักวิธีการจัดการกับการกำหนด Routing เพิ่มเติมต่อจากเนื้อหาตอนที่แล้ว
ที่เราใช้วิธีการกำหนด path ของ routing ของ App ไว้ในไฟล์ app.module.ts ซึ่งเป็นวิธีที่เหมาะสม
และเพียงพอสำหรับกรณีที่เป็น App ที่ไม่มีความซับซ้อนมาก เพราะจะสะดวกในการจัดการ แต่สำหรับ
กรณี App ของเรามีขนาดใหญ่ขึ้น มีความซับซ้อนมากขึ้น เราควรจำเป็นต้องแยกไฟล์การจัดการกับ
Routing เป็นไฟล์ใหม่ แทน ทบทวนเนื้อหาตอนที่แล้วได้ที่บทความ
    การใช้งาน Routing และ Navigation ใน Angular เบื้องต้น ตอนที่ 1 http://niik.in/841 
 
จะขอยกตัวอย่างจากเนื้อหาตอนที่แล้ว ให้เราสร้างไฟล์ชื่อ app-routing.module.ts ในโฟลเดอร์ app 
และกำหนดค่าดังต่อไปนี้
 
ไฟล์ app-routing.module.ts
 
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';


import { HomeComponent } from './home/home.component';
import { UserComponent } from './user/user.component';
import { ProductComponent } from './product/product.component';
import { PagenofoundComponent } from './pagenofound/pagenofound.component';

const appRoutes: Routes = [
  { path: 'users', component: UserComponent },
  { path: 'products', component: ProductComponent },
  { path: 'home', component: HomeComponent },
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  { path: '**', component: PagenofoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: false } // <-- debugging purposes only set true
    )
  ], 
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }
 
 


 
 
บรรทัดแรก เรา import NgModule เข้ามาเพื่อใช้ในกำหนดการสร้าง module ใหม่ 
บรรทัดที่ 2 เราต้องการใช้งาน module นี้ในการจัดการ Routing จึง import RouterModule เข้ามาใช้งาน
บรรทัดที่ 5 - 8 เป็นการ import component ต่างๆ ที่เรามีการเรียกใช้งานในการกำหนดค่าใน module นี้
บรรทัดที่ 10 - 19 เป็นส่วนของการกำหนด path ส่วนนี้อธิบายไว้แล้วในเนื้อหาตอนที่ผ่านมา
 
สำหรับในส่วนของ @NgModule หรือ module decorator ฟังก์ชั่น เราต้องทำการ import RouterModule
จาก @angular/router มาใช้งาน หรือก็คือเป็นการกำหนดการใช้งาน routing นั้นเอง คล้ายๆ กับรูปแบบที่เรา
กำหนดใน app.module.ts ในเนื้อหาตอนที่ผ่านมา
    ในส่วนนี้เราจะไม่มีการกำหนด declare component เหมือนในกับไฟล์ app.module.ts 
บรรทัดที่ 28 - 30 เรากำหนด exports เพิ่มเข้ามา  โดยทำการ exports RouterModule ไปใช้งานใน 
AppModule ในไฟล์ app.module.ts เพราะในไฟล์นั้น เราจะไม่ได้ import Angular Router แล้ว 
ดึงนั้น เพื่อให้ AppModule สามารถใช้งาน RouterLink Directive และ RouterOutlet Directive ได้
จึงต้องกำหนดการ exports ส่วนนี้ไปใช้งานด้วย
บรรทัดสุดท้าย เรา export AppRoutingModule class เพื่อไว้ไปเรียกใช้ใน AppModule
 
หลังจากได้ไฟล์ app-routing.module.ts ข้างต้นแล้ว ต่อไป เราต้องไปปรับไฟล์ app.module.ts ให้สอดคล้อง
กับการใช้งาน โค้ดด้านล่าง จะ comment ส่วนของโค้ดเดิม ที่ต้องตัดออก เพื่อเปรียบเทียบให้ดูว่า เมื่อมีการย้ายส่วน
ของการตั้งค่าต่างๆ ไปในไฟล์ app-routing.module.ts แล้วโค้ดส่วนเหลือ และจะ highlight โค้ดที่เพิ่มเข้ามาว่ามีอะไรบ้าง
 
ไฟล์ app.module.ts
 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//import { RouterModule, Routes } from '@angular/router';
 
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { HomeComponent } from './home/home.component';
import { UserComponent } from './user/user.component';
import { ProductComponent } from './product/product.component';
import { PagenofoundComponent } from './pagenofound/pagenofound.component';
 
/*
const appRoutes: Routes = [
  { path: 'users', component: UserComponent },
  { path: 'products', component: ProductComponent },
  { path: 'home', component: HomeComponent },
  { path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  { path: '**', component: PagenofoundComponent }
];
*/
 
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    UserComponent,
    ProductComponent,
    PagenofoundComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
    // RouterModule.forRoot(
    //   appRoutes,
    //   { enableTracing: false } // <-- debugging purposes only set true
    // )
  ], 
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 
ดูตัวอย่างผลลัพธ์ที่ได้ กรณีใช้งานการกำหนด routing แบบแยกเป็นไฟล์ module ใหม่ จะเห็นว่า ทำงานได้เช่นเดียว
กับการกำหนดในไฟล์ app.module.ts แต่เราจะสามารถจัดการได้ง่ายกว่า แยกเป็นสัดส่วนชัดเจน
    เนื้อหาเกี่ยวกับ Routing และ Navigator ใน Angular ยังมีรายละเอียดเพิ่มเติม อย่างเช่น การส่งค่าผ่าน การกำหนด
path ใน router และอื่นๆ รอติดตาม
 




กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ