Angular # 29 - 深入 Routing [2]

Feature Models

• 主要是拿來切分不同 domain
  • 同一個 domain 的程式碼會放在一個 domain 下，其他 domain 會放在各自的 domain，達到程式碼在 Business Logic 的劃分
  • 因為這樣的切割，可以達到 Lazy Loading，不需要的 Module 就先不載入，省一些效能與記憶體的使用
  • 切割後，測試也會好寫一點，不會有太多的外部相依要隔離

Feature module 也可以處理 Routing

• 此篇有再切出 Forums 與 Blogs module

  • Forums(forums.module.ts)

      const forumRoutes: Routes = [
        { path: 'forums', component: ForumsComponent }
      ]
    
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        ClarityModule.forChild(),
        RouterModule.forChild(forumRoutes)
      ],

    • 特別留意 RouterModule.forChild，為什麼是 forChild 而不是 forRoot 呢？這是因為 forums.module.ts 是在 AppModule 中被引用的，所以樹是從 AppModule 開始長，其他的 Module 都是 child
    • 是否一開始就要切分 Module，這件事見人見智。如果你事先就知道會切分了就切，如果不知道，事後再搬移也行
    • 這篇主要會以 /forums 及 /blogs 當作 base route(還記得前一篇的 appRoute 中定義了 /forums 嗎？)

• Routes 在設計上就是可以帶有一些例訊的

  • 比方說，要載入的資源的 ID
  • 依你的設計，資訊可以由 path 或是 query parameters 來給定

• 那麼 ForumsComponent 該如何才能處理上面說的資訊呢？

  • 首先先調整 forums.module.ts

      const forumsRoutes: Routes = [
        { path: 'forums', component: ForumsComponent },
        { path: 'forums/:forum_alias', component: ForumComponent }
      ];

    • 有看到那個特殊的語法了嗎？:forum_alias 就會是從 path 拿到資訊的方式(e.g. forums/forum_1_announcement)
    • 而在 :(分號) 之前的部份是要一致的，否則不會對應到 ForumComponent
  • 下一步就是要提供連結，請調整 app.component.html

      <a class="nav-link" 
         routerLink="/forums">
         <span class="nav-text">Forums</span>
      </a>

    • routerLink
      • 為什麼要用 routerLink，這是因為如果你用 href，它會跟後端 server 重新要資訊，並重載頁面(page load)，而這不是我們想要達到的行為
      • 在 Angular, routerLink 可以告訴 Angular 處理真正 routing，也就是用 javascript 調整 URL，並載入對應的 Component
      • 簡單來說，用 href 很慢，用 routerLink 快多了
  • 我們也可以動態的提供 routerLink，上面的例子是寫死 forum，所以我們調整一下 forums.component.html

      <tr *ngFor="let forum of forums" 
          [routerLink]="[forum.alias]">
      </tr>

    • 從上面的程式片斷可以看出我們作了 Binding，將 ForumsComponent 的 forum.alias 綁定到 routerLink 這個 attribute，而且是透過 NgFor 動態長出
    • 承上，這樣的設定會是基於目前的 URL 來處理 routing。因為現在在 ForumsComponent，所以 URL 一定是 /forums 開頭，而點了任何的連結，就會在後面接上 forum.alias 的值(e.g. /forums/forum_1_announcement)
    • 我個人習慣沒有參數的時候使用 routerLink，有參數的時候使用 [routerLink]，這樣也比較好區分類型
    • 另外特別留意我們把 [routerLink] 放在一個 table row 的元素上，通常不會這樣做，不過 Angular 會處理一切的(加上 event handler，且不會透過 href 導頁)

• 好啦，上面設了這麼多東西，要怎麼從 URL 取得資訊？

  • 先修改 ForumComponent 的 controller 如下

      import { Component, OnInit } from '@angular/core';
      import { ActivatedRoute, Router, Params } from '@angular/router';
      import { ForumsService } from '../services/forums.service';
      import { Forum } from '../services/data';
    
      @Component({
        selector: 'app-forum',
        templateUrl: './forum.component.html',
        styleUrls: ['./forum.component.css']
      })
      export class ForumComponent implements OnInit {
        forum: Forum;
    
        constructor(
          private forumsService: ForumsService,
          private route: ActivatedRoute,
          private router: Router ) { }
    
        ngOnInit() {
          this.route.params.subscribe((params:Params) =>{
            // 'forum_alias' was defined in the Forums module
            this.forum = this.forumsService.forum(params['forum_alias']);
            if(!this.forum) this.router.navigate(['/not-found']);
          });
        }
      }

    • ActivatedRoute 是一個很重要的角色
      • 它可以取得所有跟 route 相關的資訊，如目前的 URL，query/router parameters，parent/children route ...等
      • 範例中我們將 ActivatedRoute 注入到 route 這個屬性，將 Router 注入到 router 這個屬性
      • 這個 Component 在 URL 被切換到 /forums/forum_1_announcement 時會被建立
      • 承上，此時就可以在 ngOnInit 利用 ActivatedRoute 的 subscribe 取回一個 Observable 並 subscribe
    • Router
      • 在 ActivatedRoute 取得相關資訊後，有可能會需要 route 至別的 path
      • 以上面的例子就，找不到該論壇時導到 /not-found

小結:

• 此篇開始提到Angular Routing 與 URL 相關的機制
  • 如何取得 URL 中的路徑參數
  • 如何透過 ActivatedRoute/Router 處理路由相關的操作
• 下篇將更進一步提到如果在某論壇首頁 -> 特定論壇 -> 特定主題的架構下，如何用 child routes 呈現