Will 保哥在 2016/10/19 台灣 AngularJS 社群小聚 - 邁向前端工程的康莊大道 的演講簡報，花短短 40 分鐘快速示範如何使用 Angular 2 Router 快速建構 SPA 網站。 現場的 demo code 已經上傳到 GitHub https://github.com/doggy8088/angular2-meetup-161019/ 現場錄影部分稍後上傳，之後會更新上來，請關注 AngularJS User Group Taiwan 社團相關動態，網址: http://bit.ly/angularjstw

1. AngularJS
User Group Taiwan
使用 Angular 2 Router
快速建構 SPA 網站
多奇數位創意有限公司
技術總監 黃保翕 ( Will 保哥 )
部落格：http://blog.miniasp.com/

2. AngularJS
User Group Taiwan
Angular 2 路由與導覽機制
Angular 2 Routing & Navigation

3. AngularJS
User Group Taiwan
示範 Angular 2 Router 的效果
• https://angular-university.io/

4. AngularJS
User Group Taiwan
Angular 路由的核心動作
• 路由在取得 URL 之後會進行 5 個動作
1. 套用轉址設定 (Applying Redirects)
2. 從 URL 識別路由狀態 (Recognizing States)
3. 從路由狀態解析出路由資訊 (Running Guards & Resolving Data)
4. 依據路由資訊產生元件實體 (Activating Components)
5. 套用導覽動作，從目前狀態移轉至下一個狀態 (Navigation)
參考來源：https://vsavkin.com/angular-2-router-d9e30599f9ea

5. AngularJS
User Group Taiwan圖片來源： Angular 2 Router

6. AngularJS
User Group Taiwan
Angular 2 路由快速上手
Angular 2 Routing Crash Course

7. AngularJS
User Group Taiwan
• 驗證 ng 版本
$ ng -v
angular-cli: 1.0.0-beta.17
node: 6.8.1
os: win32 x64
• 建立初始專案
$ ng new demo1019 --skip-npm --routing
$ cd demo1019
$ yarn
7
使用 Angular CLI 快速建立專案範本

8. AngularJS
User Group Taiwan
App
/
Home
/home
Home1
/home/home1
Home2
/home/home2
HomeDetail
/home/1
Second
/second
8
本範例元件架構

9. AngularJS
User Group Taiwan
• 建立首頁 HomeComponent
$ ng g c home
• 建立第二頁 SecondComponent
$ ng g c second
9
使用 Angular CLI 快速建立兩個元件

10. AngularJS
User Group Taiwan
• src/index.html
<base href="/">
<app-root>Loading...</app-root>
• src/main.ts
platformBrowserDynamic().bootstrapModule(AppModule);
• src/app/app.module.ts
import { AppRoutingModule } from './app-routing.module';
@NgModule({ …, imports: [ …, AppRoutingModule ], … })
檢視 Angular 2 的啟動流程

11. AngularJS
User Group Taiwan
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
export class AppRoutingModule { }
AppRoutingModule ( 預設內容 )
Angular 2 路由機制
預設用 PathLocationStrategy
範例：
http://localhost:4200/home/home2

12. AngularJS
User Group Taiwan
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule],
providers: []
})
export class AppRoutingModule { }
AppRoutingModule ( 改用 HashLocationStrategy 策略 )
Angular 2 路由機制
可改用 HashLocationStrategy
範例：
http://localhost:4200/#/home/home2

13. AngularJS
User Group Taiwan
• app.component.html
• 路由連結
<ul>
<li><a [routerLink]="['/home']">Home</a></li>
<li><a [routerLink]="['/second']">Second</a></li>
</ul>
• 路由插座
• <router-outlet></router-outlet>
設定 AppComponent ( 根元件 ) 的路由插座

14. AngularJS
User Group Taiwan
• 推薦 johnpapa 的 Angular 2 TypeScript Snippets
• ng2-routing
產生路由定義檔預設範本 ( src/app/app-routing.module.ts )
• ng2-routerLink
產生路由連結
安裝 Visual Studio Code 擴充套件

15. AngularJS
User Group Taiwan
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SecondComponent } from './second/second.component';
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'second', component: SecondComponent }
];
AppRoutingModule ( 定義路由 )

16. AngularJS
User Group Taiwan
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SecondComponent } from './second/second.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'home', component: HomeComponent },
{ path: 'second', component: SecondComponent }
];
AppRoutingModule ( 定義預設路由 )

17. AngularJS
User Group Taiwan
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SecondComponent } from './second/second.component';
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'second', component: SecondComponent }
];
AppRoutingModule ( 定義路由轉向 )

18. AngularJS
User Group Taiwan
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SecondComponent } from './second/second.component';
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'second', component: SecondComponent },
{ path: '**', component: HomeComponent },
];
AppRoutingModule ( 定義萬用路由 )

19. AngularJS
User Group Taiwan
import { NgModule } from '@angular/core';
import { Routes, Route, RouterModule } from '@angular/router';
const fallbackRoute: Route = {
path: '**', component: HomeComponent
};
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'second', component: SecondComponent },
fallbackRoute
];
AppRoutingModule ( 定義獨立的 Route 物件 )

20. AngularJS
User Group Taiwan
Angular 2 子路由
Angular 2 Child Routing

21. AngularJS
User Group Taiwan
• 建立 Home 元件下的 home1 頁面
$ ng g c home/home1
• 建立 Home 元件下的 home2 頁面
$ ng g c home/home2
• 建立 Home 元件下的 home-detail 頁面
$ ng g c home/home-detail
21
使用 Angular CLI 快速建立 3 個 Home 子元件

22. AngularJS
User Group Taiwan
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'second', component: SecondComponent },
fallbackRoute
];
AppRoutingModule ( 定義 Home 子路由 )

23. AngularJS
User Group Taiwan
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent,
children: [
{ path: '', redirectTo: 'home1' },
{ path: 'home1', component: Home1Component },
{ path: 'home2', component: Home2Component },
{ path: ':id', component: HomeDetailComponent }
]
},
{ path: 'second', component: SecondComponent },
fallbackRoute
];
AppRoutingModule ( 定義 Home 子路由 )
http://localhost:4200/home/1
http://localhost:4200/home/home2
http://localhost:4200/home/home1
http://localhost:4200/home

24. AngularJS
User Group Taiwan
• 注入路由服務
• constructor(private router: Router,
private route: ActivatedRoute) { }
• 路由導覽 APIs 的三種常見用法
• 絕對位址
this.router.navigateByUrl('/home/1'); // 傳入 String
this.router.navigate(['home', '1']); // 傳入 Array
• 相對位址
this.router.navigate(['1'], { relativeTo: this.route });
透過程式進行路由導覽

25. AngularJS
User Group Taiwan
• 注入路由服務
• constructor(private router: Router,
private route: ActivatedRoute) { }
• 取得路由參數的兩種用法
• 僅抓取一次路由參數
• this.id = this.route.snapshot.params['id'];
• 訂閱路由參數的每次變化 ( 這裡的 this.route.params 是一個 Observable 物件 )
• this.route.params.subscribe(params => this.id = params['id']);
取得路由參數

26. AngularJS
User Group Taiwan
• Routing & Navigation – ts
• Angular 2 Router
• Routing · Rangle.io : Angular 2 Training
• Routing in Angular 2 revisited by thoughtram
• Protecting Routes using Guards in Angular 2
相關連結

27. AngularJS
User Group Taiwan
• The Will Will Web
記載著 Will 在網路世界的學習心得與技術分享
• http://blog.miniasp.com/
• Will 保哥的技術交流中心 (臉書粉絲專頁)
• http://www.facebook.com/will.fans
• Will 保哥的噗浪
• http://www.plurk.com/willh/invite
• Will 保哥的推特
• https://twitter.com/Will_Huang
聯絡方式

28. AngularJS
User Group Taiwan
Thank you