เราไปดูตัวอย่างโค้ด angular layout แบบง่าย ๆ กันครับ

ตัวอย่างนี้เราจะไปสร้างกันใน AppComponent นะครับ โดยจะทำการแก้ไข app.component.html ตามตัวอย่าง

<nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/about">About</a>
</nav>
<router-outlet></router-outlet>

จากตัวอย่างเราจะมีหน้า home กับ about เราไปสร้างหน้าสองหน้านี้ก่อนครับ

หน้า home.component.html ตามตัวอย่าง

<h1>Welcome to the Home Page</h1>
<p>This is the home page of the application.</p>

ต่อไปก็ไปทำหน้า about ในไฟล์ about.component.html ตามตัวอย่างโค้ด

<h1>About Us</h1>
<p>This is the about us page of the application.</p>

ต่อไปใน app.module.ts เราก็ไปสร้าง route ตามตัวอย่าง

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

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

นี่เป็นตัวอย่างง่าย ๆ ที่เราได้สร้างขึ้น

เราอาจจะสร้าง layout component แล้ว สร้าง header, footer แยกออกมาแต่ละ component ก็ได้ตามการออกแบบ