在现代网页中常会使用一种称为 single page application（SPA）的技术，可以通过显示或隐藏特定的 component 来更改用户看到的画面，而不是像服务器重新请求整个页面的数据对其重新加载，可以使用 Angular router 来处理当你需要处理从一个画面到另一个画面的任务，Router 通过将浏览器的 URL 解析为更改画面的指令，将使用者导航到指定的画面。

What is single page application (SPA) ?

single page application (SPA) 中文翻译为单页面应用程序，就如同他的名字他是一个只有一个页面的应用程序，在网页中可以看成使用者对网页的任何操作都不会让网页整个重新载入，简单来说他会让大部分的信息跟画面保持不变只更新少部分需要变动的资讯或画面，举例来说你在使用 gmail 的时候无论你是在收件夹还是在寄件夹，画面的标题跟左边的侧栏基本上都不会更改，更改的只有中间的那一部分，这就是 SPA 的概念。

SPA 最大的好处在於，他不像过去的网页当使用者点击某个任务时需要将整个画面重新载入，会造成使用者每次的点击都会花费大量的时间等待画面重新载入，这严重引响了使用者体验，而 SPA 则不一样，他通过动态重写当前页面的方式做到快速的更换画面，大大提升使用者的使用体验，这边只是简单介绍一下他的观念，有需要详细了解 SPA 与 MPA 的差别与各自的好处，可以看这一篇文章。

What is router?

在开发一个大型的专案时一定不可能只有一个画面，随着功能越来越多越来越复杂，就会需要更多的页面专门处理他们各自的任务，比如说登录页面专门用来处理登陆的任务，购物车页面专门用来处理购物车的存放与增删，诸如此类有非常非常多的任务与画面存在於我们的专案中。

而当在主页面中点击了购物车的功能按钮就会进到购物车的页面中，就好比主页面连接着购物车页面

而使用者又可以点击购物车页面的商品内容按钮，他又回连接到商品内容页面，商品内容页面又可以连接回主页面或去到登陆页面，诸如此类的互相关联着就如同

光看到就头皮发麻， 随着专案越来越大越来越复杂，上面这个图只会越来越密集越来越大，为了应对这种麻烦的情况 Router 出现了。

router 只有一个工作就是接收使用者传来要去到哪一个页面的任务并把画面导向对的地方，当使用者点击购物车按钮，他会发送一个使用者需要到购物车页面的任务给 Router，而 Router 正确地把画面引导向购物车页面，而在购物车页面中使用者又点击了商品内容按钮，他又会发送一个使用者要到商品内容页面的任务给 Router，当它收到任务後会再次精准地把画面导向商品内容页面

这样是不是乾净整洁多了呢？虽然在开发的过程中没有一定需要使用 Router 来达到 SPA 的效果，但是可以看到整个程序会变得非常非常复杂，所以当要建立比较大型的网页时 Router 就是非常重要的功能，当然他不只是接受任务导向画面这麽简单，还可以传递参数、纪录资讯等等，详细的内容就继续望下看吧。

Generate an application with routing enabled

了解了什麽是 SPA 与 Router 後接着来看看在 Angular 中该如何实现吧，一样举个简单的例子，当要创建 Angular 专案时可以使用 Angular CLI 自动化建立专案，在建立时有一个选项

可以选择在创建专案时直接选择要加入 Angular routing，那麽专案生成时就会附加一个 app-routing.module.ts 档案，用於建立专案的 router 设定，而如果没有在一开始生成也没关系，一样可以使用 Angular CLI 建立出来

ng generate module project --routing

这边要提醒一下当你是手动建立 routing module 的话，需要将你建立出来的 RoutingModule 放入 app.module.ts 中 @NgModule 的 metadata 的 imports 里面，这样才可以正常使用喔

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,        // remember to settings routing module in here
  ],
  providers: [],
  bootstrap: [AppComponent]   
})
export class AppModule { }

Adding components for routing

1. 建立完 routing.module 後接着来建立两个 component 让画面可以切换这两个 component 的 view

   ng generate component first
   ng generate component second
   

2. 接着将这两个 component 引入到 app-routing.module.ts 中

   import { NgModule } from '@angular/core';
   import { RouterModule, Routes } from '@angular/router';
   
   import { FirstComponent } from './sub-component/first/first.component';
   import { SecondComponent } from './sub-component/second/second.component'
   
   const routes: Routes = [];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
   })
   export class AppRoutingModule { }
   

3. 在 routes 阵列中设定要导向的路线

   const routes: Routes = [
     { path: 'first-component', component: FirstComponent },
     { path: 'second-component', component: SecondComponent },
   ];
   

   在 routes 阵列中每个 route 都是一组包含两个 property 的 javascript object，第一个 property 定义了 route 的 url 路径，第二个 property 定义了 Angular 看到这个 url 後应该显示哪一个 component。

4. 将 route 加到专案中

   <!-- app.component.html -->
   
   <h1>Angular Router App</h1>
   
   <nav>
     <ul>
       <li>
         <a routerLink="/first-component" routerLinkActive="active">First Component</a>
       </li>
       <li>
         <a routerLink="/second-component" routerLinkActive="active">Second Component</a>
       </li>
     </ul>
   </nav>
   
   <router-outlet></router-outlet>
   

   1. 首先建立两个 <a> 元件，代表在画面中可以点击两个连结分别切换两个 component 的 view
   2. 在 <a> 的 attribute 中使用 routerLink 指定 url 的路径
   3. 在 <a> 的 attrubute 中加上 routerLinkActive，他是用来处理当现在的网址与所设定的连结一致时要加上去的Class名称，简单来说当 router 为当下那个 link 时，就会将在该link 加上对应的 css class
   4. 最後在下方加上 <router-outlet> 用来显示切换的 component，等於说要被切换的 component 会出现在这边

在画面中可以看到，当点击不同的连接的时候会先更改浏览器的 url ，接着会随着 url 的切换也改变画面显示的 component，这就是 router 的功用。

结论

本章中介绍了什麽是 SPA 以及他的优点，而在开发 SPA 时会随着页面越来越多而形成越来越复杂的互相连接的关系，所以就需要 Router 的出现，他可以让我们开发专案时减少复杂的页面连接，专心开发 component 与画面就好，导向的工作就由 Router 来完成。

讲解了最基本的 Router 的用法，下一篇中将会介绍 Router 在 Angular 中的更多用法，那我们就明天见吧！

Reference

• Single Page Application (SPA) vs Multi Page Application (MPA) – Two Development Approaches
• How does the Internet work?
• Angular.io - Angular Routing
• Angular.io - Common Routing Tasks