Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

使用 Angular 2 Router 快速建構 SPA 網站

7,249 views

Published on

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

Published in: Technology
  • Be the first to comment

使用 Angular 2 Router 快速建構 SPA 網站

  1. 1. AngularJS User Group Taiwan 使用 Angular 2 Router 快速建構 SPA 網站 多奇數位創意有限公司 技術總監 黃保翕 ( Will 保哥 ) 部落格:http://blog.miniasp.com/
  2. 2. AngularJS User Group Taiwan Angular 2 路由與導覽機制 Angular 2 Routing & Navigation
  3. 3. AngularJS User Group Taiwan 示範 Angular 2 Router 的效果 • https://angular-university.io/
  4. 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. 5. AngularJS User Group Taiwan圖片來源: Angular 2 Router
  6. 6. AngularJS User Group Taiwan Angular 2 路由快速上手 Angular 2 Routing Crash Course
  7. 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. 8. AngularJS User Group Taiwan App / Home /home Home1 /home/home1 Home2 /home/home2 HomeDetail /home/1 Second /second 8 本範例元件架構
  9. 9. AngularJS User Group Taiwan • 建立首頁 HomeComponent $ ng g c home • 建立第二頁 SecondComponent $ ng g c second 9 使用 Angular CLI 快速建立兩個元件
  10. 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. 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. 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. 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. 14. AngularJS User Group Taiwan • 推薦 johnpapa 的 Angular 2 TypeScript Snippets • ng2-routing 產生路由定義檔預設範本 ( src/app/app-routing.module.ts ) • ng2-routerLink 產生路由連結 安裝 Visual Studio Code 擴充套件
  15. 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. 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. 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. 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. 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. 20. AngularJS User Group Taiwan Angular 2 子路由 Angular 2 Child Routing
  21. 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. 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. 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. 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. 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. 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. 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. 28. AngularJS User Group Taiwan Thank you

×