Angular之所以被稱爲單頁面應用，就是因爲我們在改變瀏覽器URL的時候，
不觸發刷新當前頁面的行爲，我們看到的所有的界面，其實是在一個主URL中。
這個功能（功能？現象？表現？隨便吧！）就是通過路由實現的。
下面我們先簡單的看一個關於路由的例子。
當我們點擊上面的導航欄時，當前頁面的地址會變成類似http://localhost:63342/test.html#about
尾部帶的#about就是我們常常說的錨標記，上述例子中我們使用的是錨標記最傳統的用法，
直接連接到所在頁面的其他位置，比如這個例子中，本來about部分的內容是在窗口之外的，
訪問量#about之後，頁面就會自動滾動，將它展示出來。
關於路由的其他詳細介紹可以參考我之前的博客。
ionic入門教程第十九課-ionic路由詳解（state、route、resolve）
http://blog.csdn.net/onil_chen/article/details/51758696
以上面文章中提到的view概念不同的是，
在Angular4中，使用的是<router-outlet></router-outlet>
來設置頁面的渲染位置。
根據我們上節課的例子，裏面，我們需要反覆渲染的是圖中標註區域。
而保留navbar和網站狀態。
導入路由模塊
打開\src\app\app.module.ts
在頭部導入RouterModule和Routes
import { RouterModule , Routes } from ‘@angular/router’;
RouterModule是指路由模塊。
Routes是應用程序支持的路由配置的數組。
新建路由對象
我們還是查看Angular中文社區的樣式，我們先創建三個路由。
首先我們先創建三個組件。
$ ng generate component update
這裏需要注意的是，我們使用命令創建組件，會自動被加到@NgModule的declarations中
如果你是手動創建組件，那麼你需要把所有用到的組件，加到這個位置。
然後我們設置路由參數是這樣子的{path:'latest',component:LatestComponent}
path表示路徑，component表示路由對應的組件。
然後我們也有可能訪問了沒有路由的頁面，
我們並不希望界面沒有渲染，而是被重定向到最新模塊。
{path:'',redirectTo:'latest',pathMatch: 'full'}
redirectTo表示的是講當前路徑重定向到另一個路徑。
最終我們的router對象就是
使用路由配置
剛剛我們已經配置了我們的路由對象，接下來我們要把它引用到我們的項目中。
在@NgModule的imports中加入RouterModule.forRoot(routes)
在@NgModule的providers中加入{provide:LocationStrategy,useClass:HashLocationStrategy}
這裏涉及到路由策略的內容，我們後續課程單獨講解。
上面的設置就是使用錨標記策略。
設置渲染界面
打開src\index.html在head下面加入<base href="/">
打開\src\app\app.component.html
保存運行。
點擊導航切換
源代碼：百度雲 鏈接：http://pan.baidu.com/s/1pKEV4HP 密碼：fief
碼雲：https://gitee.com/xiaohuOni/oniplan-ng
有碼雲的幫忙給個star，感謝。
這節課的內容就到這裏完成了。
感謝您的閱讀。
我是莽夫，希望你開心。
如果你覺得本文對你有幫助，請掃描文末二維碼，支持博主原創。
希望大家關注我的個人公衆號ionic_
