在上一篇文章使用 Angular 2 開發(fā)單頁應(yīng)用程序之一 中，我們已經(jīng)完成了Angular 2開發(fā)環(huán)境的安裝，并建立了一個最簡單可運行的 Angular 2 單頁應(yīng)用程序SPA dw-ng2-app。
dw-ng2-app 包含有一個模塊、一個組件、一個類、一個模板、元數(shù)據(jù)和數(shù)據(jù)綁定， 但它仍缺少 4 個其他的重要部分：

• 多個組件
• 路由
• 服務(wù)
• 微服務(wù)的使用
  接下來，您將創(chuàng)建這些自定義組件。

創(chuàng)建自定義組件和路由

創(chuàng)建自定義組件

按 Ctrl-C 停止 Angular 進程。在命令提示符下，運行以下命令：

• ng g c Menu -is --spec false --flat：在 AppModule 根模塊內(nèi)創(chuàng)建 Menu 組件。
• ng g c Weather -is --spec false：在 AppModule weather 子目錄創(chuàng)建 Weather 組件。
• ng g c Currency -is --spec false：在 AppModule currency 子目錄中創(chuàng)建 Currency 組件。

• ng g c Movie -is --spec false：在 AppModule movie 子目錄中創(chuàng)建 Movie 組件。

  
  
  執(zhí)行命令

創(chuàng)建路由

要讓 Angular 能在組件之間導(dǎo)航，需要創(chuàng)建路由。使用以下內(nèi)容覆蓋 menu.component.html 文件。

<div class="row">
  <div class="col-xs-12">
    <ul class="nav nav-pills">
      <li routerLinkActive="active"> <a [routerLink]="['/weather']" >Weather</a></li>
      <li routerLinkActive="active"> <a [routerLink]="['/movie']" >Movie Details</a></li>
      <li routerLinkActive="active"> <a [routerLink]="['/currency']" >Currency Rates</a></li>
    </ul>
  </div>
</div>

上面的菜單代碼提供了頁面菜單，當(dāng)在菜單上點擊Movie Details 時，Angular 會跳轉(zhuǎn)到URL路徑 http://localhost:4200/movie
下面將URL路徑映射到我們在上一步創(chuàng)建的組件上。在根模塊的文件夾中，創(chuàng)建一個名為 app.routing.ts 的配置文件，內(nèi)容如下：

import { Routes, RouterModule } from '@angular/router';
import { CurrencyComponent } from "./currency/currency.component";
import { WeatherComponent } from "./weather/weather.component";
import { MovieComponent } from "./movie/movie.component";
const MAINMENU_ROUTES: Routes = [
    //full : makes sure the path is absolute path
    { path: '', redirectTo: '/weather', pathMatch: 'full' },
    { path: 'weather', component: WeatherComponent },
    { path: 'movie', component: MovieComponent },
    { path: 'currency', component: CurrencyComponent } 
];
export const CONST_ROUTING = RouterModule.forRoot(MAINMENU_ROUTES);

如果 URL相對路徑是 movie，則 Angular 會調(diào)用 MovieComponent 組件。
現(xiàn)在，將頁面鏈接到父組件，將 app.component.html 修改為以下內(nèi)容：

<div class="container">
  <app-menu></app-menu>
  <hr>
  <router-outlet></router-outlet>
</div>

• app-menu 會引入菜單
• route-outlet 是URL指定的組件，可能是天氣、電影或貨幣。

你還必須在模塊中引入這個路由，在 app.module.ts 文件中添加兩項，如下，

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { MenuComponent } from './menu.component';
import { WeatherComponent } from './weather/weather.component';
import { CurrencyComponent } from './currency/currency.component';
import { MovieComponent } from './movie/movie.component';
import { CONST_ROUTING } from './app.routing'; // 新添加
 
@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    WeatherComponent,
    CurrencyComponent,
    MovieComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    CONST_ROUTING // 新添加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

現(xiàn)在，如果您運行應(yīng)用程序并單擊 Weather 鏈接，應(yīng)用程序?qū)@示 weather works!：

天氣組件

電影組件

貨幣組件

至此，我們成功修改了 Angular 應(yīng)用程序 dw-ng2-app，創(chuàng)建了多個自定義組件和路由。后續(xù)的文章中將繼續(xù)介紹如何創(chuàng)建服務(wù)，并將這些服務(wù)集成到前端頁面視圖中。

文章導(dǎo)航

1. 使用 Angular 2 開發(fā)單頁應(yīng)用程序之一
2. 使用 Angular 2 開發(fā)單頁應(yīng)用程序之二
3. 使用 Angular 2 開發(fā)單頁應(yīng)用程序之三

進一步的學(xué)習(xí)

免費獲取項目源代碼，咨詢老師進行答疑指導(dǎo)，請加QQ：1628145742 ，或報名我們的實戰(zhàn)課程：

• http://www.yikeshangshou.com/course/207
• http://www.yikeshangshou.com/course/211