在上一篇文章使用 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!：
如果單擊 Movie Details 鏈接，應(yīng)用程序會顯示 movie works!：
如果單擊 Currency Rates 鏈接戳晌，應(yīng)用程序?qū)@示 currency works!：
至此鲫尊，我們成功修改了 Angular 應(yīng)用程序 dw-ng2-app，創(chuàng)建了多個自定義組件和路由沦偎。后續(xù)的文章中將繼續(xù)介紹如何創(chuàng)建服務(wù)马昨，并將這些服務(wù)集成到前端頁面視圖中竞帽。
文章導(dǎo)航
- 使用 Angular 2 開發(fā)單頁應(yīng)用程序之一
- 使用 Angular 2 開發(fā)單頁應(yīng)用程序之二
- 使用 Angular 2 開發(fā)單頁應(yīng)用程序之三
進一步的學(xué)習(xí)
免費獲取項目源代碼，咨詢老師進行答疑指導(dǎo)鸿捧，請加QQ：1628145742 屹篓，或報名我們的實戰(zhàn)課程：
