如何建立 Route ?

2018-02-12 10:48:10来源:http://oomusou.io/simple-route/作者:點燈坊人点击

分享

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


Version

macOS High Sierra 10.13.3


Node.js 8.9.4


Angular CLI 1.6.7


Angular 5.2.4


建立 Route
建立专案时一併建立 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

之所以要特别用 forRoot() 与 forChild() ,因为当 AppModule 与其他 module 都 import RouterModule 时,由于其他 module 都有自己的 DI injector,会屏蔽 AppModule 的 Router ,有就是说 Router 将不再整个 app 共用,而是各 module 有自己的 Router ,因此 RouterModule 特别不提供 provider,而是改由 forRoot() 与 forChild() 提供,如此整个 app 将只会有一份 Router



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

理论上 app.module.ts 与 app-routing.module.ts 可以合一,但因为 app.module.ts 有他原本的职责,如 declarations 、 imports 、 providers 与 bootstrap ,且简单的 app 也可能也没使用 route,因此特别将 route 部分特别独立为 app-routing.module.ts ,再 import 进 app.module.ts 即可


建立专案后事后加上 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



在专案目录下执行 ng g m App --flat —routing
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


设定 Route
建立 Login 与 Post Component

使用一般建立 component 的方式建立 LoginComponent 与 PostComponent (略)


设定 routes
app-routing.module.ts

import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { PostComponent } from './post/post.component';
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'post', component: PostComponent },
{ path: '', redirectTo: '', pathMatch: 'full'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }


第 6 行



const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'post', component: PostComponent },
{ path: '', redirectTo: '', pathMatch: 'full'}
];


Routes 为 Angular 定义的 Route 阵列,用来设定 user 自己的 route 定义。


第 7 行



{ path: 'login', component: LoginComponent },



path : 设定 route 路径
component : 当符合 path 定义时,该显示的 component

当 URI 为 login 时,显示 LoginComponent


第 8 行



{ path: 'post', component: PostComponent },


当 URI 为 post 时,显示 PostComponent


第 9 行



{ path: '', redirectTo: '', pathMatch: 'full' },



redirectTo : redirect 到其他 URI 路径
pathMatch : 与 path 的匹配方式

当 URI 为 空字串 ,redirect 到 '' ,且必须完全符合 path 定义


使用 router-outlet 与 routerLink
app.component.html

Welcome to {{ title }}!
<p></p>
<button routerLink="login">Login</button>
<button routerLink="post">Post</button>
<button routerLink="">Home</button>
<router-outlet></router-outlet>


第 6 行



<router-outlet></router-outlet>


当在 AppRoutingModule 的 routes 设定 component 时,会显示在哪呢 ? 就是显示在 HTML template 的 <router-outlet></router-outlet> 内。


第 2 行



<a routerLink="login">Login</a>


原本的 <a> 会使用 href ,但这会导致 Angular 使用后端的 route,也就是整个网页会重新载入;若使用 routerLink ,则 Angular 会使用前端的 route,也就是将 <router-outlet></router-outlet> 换成其他 component,使用者体验较好。


Conclusion
Angular 也有自己的 route,传统页面跳转的 route 必须改设定在 Angular
Sample Code

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


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台