如何使用 Angular CLI 建立 Route ?

传统以后端为主的 MVC 写法，route 会写在后端；前后端分离的 SPA 写法，前后端 有各自的 route，前端的 route 负责切换 component，而后端的 route 则负责 API。

Angular CLI 无法单独建立 route，而是将 route 视为 module，透过建立 module 来建立 route。

Version

---

Node.js 8.9.3
Angular CLI 1.6.2
Angular 5.1.2

建立项目时一并建立 Route

---

$ ng new MyProject --routing

新建项目时，加上 --routing 参数。

1. Angular CLI 会替我们在 src/app 目录下新增 app-routing.module.ts 档案
2. class 名称为 AppRoutingModule
3. routes 阵列即位自订 route 之处

第 7 行

imports: [RouterModule.forRoot(routes)],

forRoot() 为 RouterModule 的 factory method，为 static， 传入 routes 后，回传给 AppModule 所使用的 RouterModule一般来说，imports 要的都是单纯 module，如 BrowserModule，但这里用的却是 RouterModule.forRoot()。

• forChild() 亦为 RouterModule 的 factory method，为 static，传入 routes 后，回传其他 module 所使用的 RouterModule

1. Angular CLI 还替我们修改了 app.module.ts
2. 自动将 AppRoutingModule import 进来

Route 在 Angular 是以 module 的型态存在，也就是 AppRoutingModule 是个独立 module，且 AppModule 必须将 AppRoutingModule 给 import 进来才能使用

建立项目后事后加上 Route

---

假如一开始建立项目时没加上 --routing ，也可事后再建立 route。

Angular CLI 并没有提供单独建立 route 的指令，只能在建立 module 时，顺便加上 --routing 参数建立 route

将 app.module.ts 暂时改名

1. 将 app.module.ts 暂时改名为 app.module.ts.bak

因为我们即将重建 app.module.ts，所以先将目前的 app.module.ts 改名避开

重新建立有 Route 的 AppModule

~/MyProject $ ng g m App --flat --routing

--flat : 不要将 AppRouting 建立在目前目录下，而是建立在 src/app 目录下m : module 的缩写

--routing : 一并建立 AppRoutingModule

1. 在项目目录下重新建立 AppModule，一并建立 AppRoutingModule
2. Angular CLI 会替我们建立 app.module.ts 与 app-routing.module.ts 两个档案
3. 在 AppModule 中，会自动帮我们 import AppRoutingModule

刪除 app.module.ts

Angular CLI 刚刚帮我们建立了全新的 app.module.ts，手动将此档删除

因为我们目的是要 Angular CLI 帮我们建立 app-routing.module.ts，app.module.ts 没有利用价值需删除

將 app.module.ts.bak 改为 app.module.ts

1. 将 app.module.ts 删除，再将 app.module.ts.bak 重新命名为 app.module.ts

app.module.ts.bak 才是我们原本的 app.module.ts

修改 AppModule

1. 选择 app.module.ts
2. 在 imports 加上刚刚建立的 AppRoutingModule

修改 AppRoutingModule

1. 选择 app-routing.module.ts
2. 將 forChild() 改成 forRoot()

   如此无论是一开始建立项目就加上 --routing 参数，或者先建立项目，事后再补建立 route，目前 AppModule 都有相同的 AppRoutingModule

Conclusion

---

• Angular 也有自己的 route，传统页面跳转的 route 必须改设定在 Angular
• Angular CLI 无法单独建立 route，必须透过建立 module 来建立 route