實作TicketListComponent

接下來繼續來製作票卷的功能

可以利用實戰篇三、四的步驟來複習一下

實作完成頁面如下

接下來我們可以在HeaderComponent

利用Bootstrap的NavBar功能

來導覧行程及票卷功能的頁面

in header.component.html

<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" href="#">Lala Travel</a>
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a class="nav-link" routerLink="tour-list" routerLinkActive="active">行程 Tour</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLink="ticket-list" routerLinkActive="active">票卷 Ticket</a>
    </li>
  </ul>
</nav>

呈現結果如下

為導覧列制作Route，並使用Lazy loading module的方式

首先我們要先設定好根模組AppModule的RoutingModule - app.routing.module.ts

// in app.routing.module.ts

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

export const routes: Routes = [
  { path: '', redirectTo: 'tour-list', pathMatch: 'full'},
  { path: 'tour-list', loadChildren: 'app/tour/tour.module#TourModule' },
  { path: 'ticket-list', loadChildren: 'app/ticket/ticket.module#TicketModule' }
];

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

把AppRoutingModule加入到AppModule

// in app.module.ts

...
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [...],
  imports: [
  	...
    TourModule,
    TicketModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在TourModule和TicketModule也分別做好Route設定

in tour.module.ts

...

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: 'tour-list', component: TourListComponent }
    ])
  ],
  ...
})
export class TourModule { }

in ticket.module.ts

...
@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: 'ticket-list', component: TicketListComponent }
    ])
  ],
  ...
})
export class TicketModule { }

修改app.component.html

加上<router-outlet></router-outlet>

用來標記Router該在哪裡顯示Component

// in app.component.html

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

重整頁面，就可以發現可以使用Navbar切換導覧行程及票卷頁面了

提供今天的Github專案進度檔案

還有API的專案更新，加上Ticket的Restful API