การใช้งาน Routing และ Navigation ใน Angular เบื้องต้น ตอนที่ 1

C:\projects>ng new simplerouter

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');

C:\projects\simplerouter>ng g c home

C:\projects\simplerouter>ng g c user

C:\projects\simplerouter>ng g c product

C:\projects\simplerouter>ng g c pagenofound

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" routerLink="/home" routerLinkActive="active">Home</a>
      <a class="navbar-brand" routerLink="/users" routerLinkActive="active">User</a>
      <a class="navbar-brand" routerLink="/products" routerLinkActive="active">Product</a>      
      <a class="navbar-brand" routerLink="/contact" routerLinkActive="active">Contact Us</a>            
    </div> 
  </div>
</nav>

<div class="container">
  <br>
  <br>
  <h1>{{title}}</h1>
  <router-outlet></router-outlet>

</div><!-- /.container -->

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


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


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    UserComponent,
    ProductComponent,
    PagenofoundComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';


import { AppComponent } from './app.component';
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,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: false } // <-- debugging purposes only set true
    )
    // other imports here
  ], 
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }