Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit3f7815c

Browse files
authored
Merge pull request#4 from waylau/feat-route
添加路由器
2 parentse11b327 +ad6280a commit3f7815c

File tree

10 files changed

+191
-6
lines changed

10 files changed

+191
-6
lines changed

‎SUMMARY.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
*[添加用户服务](docs/user-service.md)
1313
*[自定义 Observable](docs/observable.md)
1414
*[添加消息组件](docs/message-component.md)
15+
*[添加路由器](docs/route.md)
1516
*[参考资料](docs/references.md)
1617
* To be continued ...未完待续...
1718

‎docs/route.md‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
#添加路由器
2+
3+
本章节，我们将实现路由功能。实现，不同的 URL 能够映射到不同的模块。
4+
5+
##添加 AppRoutingModule
6+
7+
Angular 的最佳实践之一就是在一个独立的顶级模块中加载和配置路由器，它专注于路由功能，然后由根模块 AppModule 导入它。
8+
9+
按照惯例，这个模块类的名字叫做 AppRoutingModule，并且位于 src/app 下的 app-routing.module.ts 文件中。
10+
11+
使用 CLI 生成它。
12+
13+
```ts
14+
nggeneratemoduleapp-routing --flat --module=app
15+
```
16+
17+
* --flat 把这个文件放进了 src/app 中，而不是单独的目录中。
18+
* --module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。
19+
20+
在控制台，可以看到如下生成的文件：
21+
22+
```ts
23+
nggeneratemoduleapp-routing --flat --module=app
24+
25+
CREATEsrc/app/app-routing.module.spec.ts (308bytes)
26+
CREATEsrc/app/app-routing.module.ts (194bytes)
27+
UPDATEsrc/app/app.module.ts (751bytes)
28+
```
29+
30+
31+
32+
其中，src/app/app-routing.module.ts 文件是这样的：
33+
34+
35+
```ts
36+
import {NgModule }from'@angular/core';
37+
import {CommonModule }from'@angular/common';
38+
39+
@NgModule({
40+
imports: [
41+
CommonModule
42+
],
43+
declarations: []
44+
})
45+
exportclassAppRoutingModule { }
46+
```
47+
48+
49+
50+
通常我们不会在路由模块中声明组件，所以可以删除@NgModule.declarations 并删除对 CommonModule 的引用。
51+
52+
你将会使用 RouterModule 中的 Routes 类来配置路由器，所以还要从@angular/router 库中导入这两个符号。
53+
54+
添加一个@NgModule.exports 数组，其中放上 RouterModule。导出 RouterModule 让路由器的相关指令可以在 AppModule 中的组件中使用。
55+
56+
此刻的 AppRoutingModule 是这样的：
57+
58+
```ts
59+
import {NgModule }from'@angular/core';
60+
import {RouterModule,Routes }from'@angular/router';
61+
62+
@NgModule({
63+
exports: [RouterModule]
64+
})
65+
exportclassAppRoutingModule { }
66+
```
67+
68+
##添加路由定义
69+
70+
路由定义会告诉路由器，当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图。
71+
72+
典型的 Angular 路由（Route）有两个属性：
73+
74+
* path：一个用于匹配浏览器地址栏中 URL 的字符串。
75+
* component：当导航到此路由时，路由器应该创建哪个组件。
76+
77+
如果你希望当 URL 为 localhost:4200/users 时，就导航到 UsersComponent。
78+
79+
首先要导入 UsersComponent，以便能在 Route 中能引用它。 然后定义一个路由数组，其中的某个路由是指向这个组件的。
80+
81+
```ts
82+
import {UsersComponent }from'./users/users.component'
83+
84+
const routes:Routes= [
85+
{ path:'users', component:UsersComponent }
86+
];
87+
```
88+
89+
完成这些设置之后，路由器将会把 URL 匹配到 path: 'users'，并显示 UsersComponent。
90+
91+
92+
##RouterModule.forRoot()
93+
94+
你必须首先初始化路由器，并让它开始监听浏览器中的地址变化。
95+
96+
把 RouterModule 添加到@NgModule.imports 数组中，并用 routes 来配置它。你只要调用 imports 数组中的 RouterModule.forRoot() 函数就行了。
97+
98+
```ts
99+
imports: [RouterModule.forRoot(routes) ],
100+
```
101+
102+
这个方法之所以叫 forRoot()，是因为你要在应用的顶级配置这个路由器。 forRoot() 方法会提供路由所需的服务提供商和指令，还会基于浏览器的当前 URL 执行首次导航。
103+
104+
105+
所以，此刻的 AppRoutingModule 的代码如下：
106+
107+
```ts
108+
import {NgModule }from'@angular/core';
109+
import {RouterModule,Routes }from'@angular/router';
110+
111+
import {UsersComponent }from'./users/users.component'
112+
113+
const routes:Routes= [
114+
{ path:'users', component:UsersComponent }
115+
];
116+
117+
@NgModule({
118+
imports: [RouterModule.forRoot(routes) ],
119+
exports: [RouterModule]
120+
})
121+
exportclassAppRoutingModule { }
122+
```
123+
124+
125+
126+
##添加路由出口 （RouterOutlet）
127+
128+
打开 AppComponent 的模板（app.component.html），把 <app-users> 元素替换为 <router-outlet> 元素。
129+
130+
```html
131+
<h1>{{title}}</h1>
132+
<router-outlet></router-outlet>
133+
<app-messages></app-messages>
134+
```
135+
136+
之所以移除 <app-users>，是因为只有当用户导航到这里时，才需要显示 UsersComponent。
137+
138+
<router-outlet> 会告诉路由器要在哪里显示路由到的视图。
139+
140+
能在 AppComponent 中使用 RouterOutlet，是因为 AppModule 导入了 AppRoutingModule，而 AppRoutingModule 中导出了 RouterModule。
141+
142+
143+
##运行查看效果
144+
145+
146+
执行`ng serve` 命名以启动应用。访问<http://localhost:4200/> 效果如下：
147+
148+
![](../images/route/route001.jpg)
149+
150+
151+
显示着应用的标题，但是没有显示用户列表。
152+
153+
在浏览器的地址栏，我们把 URL 改为<http://localhost:4200/users>时，由于路由到了 UsersComponent 模块，因此能够熟悉的主从结构的用户显示界面：
154+
155+
![](../images/route/route002.jpg)

‎images/route/route001.jpg‎

13.9 KB
Loading

‎images/route/route002.jpg‎

28.8 KB
Loading

‎samples/hello-world/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
},
2727
"devDependencies": {
2828
"@angular-devkit/build-angular":"~0.7.0",
29-
"@angular/cli":"~6.1.1",
29+
"@angular/cli":"~6.1.5",
3030
"@angular/compiler-cli":"^6.1.0",
3131
"@angular/language-service":"^6.1.0",
3232
"@types/jasmine":"~2.8.6",
@@ -40,7 +40,7 @@
4040
"karma-coverage-istanbul-reporter":"~2.0.0",
4141
"karma-jasmine":"~1.1.1",
4242
"karma-jasmine-html-reporter":"^0.2.2",
43-
"protractor":"~5.3.0",
43+
"protractor":"~5.4.0",
4444
"ts-node":"~5.0.1",
4545
"tslint":"~5.9.1",
4646
"typescript":"~2.7.2"

‎samples/user-management/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
},
2727
"devDependencies": {
2828
"@angular-devkit/build-angular":"~0.7.0",
29-
"@angular/cli":"~6.1.1",
29+
"@angular/cli":"~6.1.5",
3030
"@angular/compiler-cli":"^6.1.0",
3131
"@angular/language-service":"^6.1.0",
3232
"@types/jasmine":"~2.8.6",
@@ -40,7 +40,7 @@
4040
"karma-coverage-istanbul-reporter":"~2.0.0",
4141
"karma-jasmine":"~1.1.1",
4242
"karma-jasmine-html-reporter":"^0.2.2",
43-
"protractor":"~5.3.0",
43+
"protractor":"~5.4.0",
4444
"ts-node":"~5.0.1",
4545
"tslint":"~5.9.1",
4646
"typescript":"~2.7.2"
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import{AppRoutingModule}from'./app-routing.module';
2+
3+
describe('AppRoutingModule',()=>{
4+
letappRoutingModule:AppRoutingModule;
5+
6+
beforeEach(()=>{
7+
appRoutingModule=newAppRoutingModule();
8+
});
9+
10+
it('should create an instance',()=>{
11+
expect(appRoutingModule).toBeTruthy();
12+
});
13+
});
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import{NgModule}from'@angular/core';
2+
import{RouterModule,Routes}from'@angular/router';
3+
4+
import{UsersComponent}from'./users/users.component'
5+
6+
constroutes:Routes=[
7+
{path:'users',component:UsersComponent}
8+
];
9+
10+
@NgModule({
11+
imports:[RouterModule.forRoot(routes)],
12+
exports:[RouterModule]
13+
})
14+
exportclassAppRoutingModule{}
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<h1>{{title}}</h1>
2-
<app-users></app-users>
2+
<router-outlet></router-outlet>
33
<app-messages></app-messages>

‎samples/user-management/src/app/app.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { AppComponent } from './app.component';
66
import{UsersComponent}from'./users/users.component';
77
import{UserDetailComponent}from'./user-detail/user-detail.component';
88
import{MessagesComponent}from'./messages/messages.component';
9+
import{AppRoutingModule}from'.//app-routing.module';
910

1011
@NgModule({
1112
declarations:[
@@ -16,7 +17,8 @@ import { MessagesComponent } from './messages/messages.component';
1617
],
1718
imports:[
1819
BrowserModule,
19-
FormsModule
20+
FormsModule,
21+
AppRoutingModule
2022
],
2123
providers:[],
2224
bootstrap:[AppComponent]

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp