Angular课程实验手册(六)

在本系列的上一篇文章中,我们使用 HttpClient,从后台服务中获取了待办事项列表。 本文继续深化应用,将引入多个接界面,并在多个界面间切换(routing)

路由 (Router)

建立页面

  1. 建立主 (Home) 页面
    在项目根目录运行 ng g 命令生成新的界面
    1
    ng g component pages/HomePage

系统输出为:

1
2
3
4
5
CREATE src/app/pages/home-page/home-page.component.html (28 bytes)
CREATE src/app/pages/home-page/home-page.component.spec.ts (643 bytes)
CREATE src/app/pages/home-page/home-page.component.ts (280 bytes)
CREATE src/app/pages/home-page/home-page.component.css (0 bytes)
UPDATE src/app/app.module.ts (762 bytes)

注意: 在Angular中,其实没有页面(page)的概念,任何可显示的都是组件或指令,因此在这里我们新建的也是组件,只是为了和可以复用的组件区分开来,我们分别把这两种逐渐放在不同的目录中,页面在 pages 目录中,而可复用的组件放在 components 目录中。如下所示:

1
2
3
4
5
app
+ components
+ layout
+ widget
+ pages

  1. 建立登录 (Login) 界面

执行

1
ng g component pages/LoginPage

系统显示:

1
2
3
4
5
CREATE src/app/pages/login-page/login-page.component.html (29 bytes)
CREATE src/app/pages/login-page/login-page.component.spec.ts (650 bytes)
CREATE src/app/pages/login-page/login-page.component.ts (284 bytes)
CREATE src/app/pages/login-page/login-page.component.css (0 bytes)
UPDATE src/app/app.module.ts (864 bytes)

说明已经建好了需要的界面

配置路由

打开 src/app 目录下的 app-routing.module 文件, 可以看到如下代码:

1
2
3
4
5
6
7
8
9
10
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

可以看到,现在还没有设置任何路由规则, 接下来,我们就在Routes中加入 Login 和 Home 页面的路由规则,改变后的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginPageComponent } from './pages/login-page/login-page.component';
import { HomePageComponent } from './pages/home-page/home-page.component';

const routes: Routes = [
{
path:'',
component: LoginPageComponent
},
{
path: 'home',
component: HomePageComponent
}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

修改 App 组件

在这里,我们配置 Login 页面为默认显示的页面,强制用户必须要登录以后才可以使用应用的其它功能。

最后,我们修改 app 组件, 把原来的显示待办事项列表相关的代码移到 Home 页面中,把 app 作为一个页面的路由组件来使用。

  1. 修改 app.component.html

将除第一行以外的所有代码移到新建的 home-page.component.html 文件中,并增加指令, 修改后的代码如下:

1
2
<app-header title="Angular课程"></app-header>
<router-outlet></router-outlet>
  1. 修改 app.component.ts

将属性 tasks 和 ngOnInit 方法全部移到 home-page.component.ts 文件中, 修改后的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'todo-web-app';

constructor() { }

ngOnInit() {}

}

修改 HomePage 组件

  1. 修改 home-page.component.html 文件,删除自动生成的代码,加入从 app.component.html 中移除的代码, 修改后的代码为:
1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
<div *ngFor="let task of tasks">
<app-card [title]="task.title">
<div class='card-content'>
<div>{{ task.desc }} </div>
<div>{{ task.done }} </div>
</div>
<div class="card-footer-toolbar">
<button>Done</button>
</div>
</app-card>
</div>
</div>
  1. 修改 home-page.component.ts 文件, 加入 tasks 定义,实现 ngOnInit 方法,其实这些都是原来在 app.component.ts 中的代码, 修改后的代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { Component, OnInit } from '@angular/core';
import { Todo } from '../../models/todo';
import { TodoSrvService } from '../../services/todo-srv.service';

@Component({
selector: 'app-home-page',
templateUrl: './home-page.component.html',
styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {

tasks: Todo[];

constructor(private todoSrv: TodoSrvService) { }

ngOnInit() {
this.todoSrv.getTasks().subscribe(res => {
if (res['succ']) {
this.tasks = res['data'];
} else {
alert(res['msg'])
}
})
}
}

注意: import service 和 model 的路径发生了变化。

修改 LoginPage 组件

在本节中,我们先简单的放一个 routerLink, 将页面连接起来,让大家初步理解路由(route)的含义和效果。因此简单的改变 login-page.component.html 文件如下:

1
2
<div>Login Page</div>
<a routerLink='/home'>Go to Home</a>

然后执行 ng serve, 运行应用,查看效果。

正常的效果应该是访问本地的4200端口后,看到登录页面,当按下”Go to Home”连接后,进入Home页面,自动从服务端获取待办事项列表并显示。

下一步

下一篇文章,我们将实现登录功能并加入强制用户登录的逻辑。

本文标题:Angular课程实验手册(六)

文章作者:晨星

发布时间:2019年06月27日 - 11:06

最后更新:2020年05月28日 - 16:05

原始链接:https://www.mls-tech.info/web/angular/angular-practice-manual-6/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。