如何使用 Angular CLI 建立 Route ?

2018-01-13 11:02:56来源:http://oomusou.io/angular/route101/作者:點燈坊人点击

分享

传统以后端为主的 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 参数。



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

第 7 行



imports: [RouterModule.forRoot(routes)],


一般来说, imports 要的都是单纯 module,如 BrowserModule ,但这里用的却是 RouterModule.forRoot() 。


forRoot() 为 RouterModule 的 factory method,为 static , 传入 routes 后,回传给 AppModule 所使用的 RouterModule
forChild() 亦为 RouterModule 的 factory method,为 static ,传入 routes 后,回传其他 module 所使用的 RouterModule


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

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


建立专案后事后加上 Route

假如一开始建立专案时没加上 --routing ,也可事后再建立 route。


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


将 app.module.ts 暂时改名


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

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


重新建立有 Route 的 AppModule

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


m : module 的缩写


--flat : 不要将 AppRouting 建立在目前目录下,而是建立在 src/app 目录下


--routing : 一併建立 AppRoutingModule



在专案目录下重新建立 AppModule ,一併建立 AppRoutingModule
Angular CLI 会替我们建立 app.module.ts 与 app-routing.module.ts 两个档案
在 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


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

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


修改 AppModule


选择 app.module.ts
在 imports 加上刚刚建立的 AppRoutingModule
修改 AppRoutingModule


选择 app-routing.module.ts
将 forChild() 改成 forRoot()

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


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

完整的範例可以在 GitHub 上找到


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台