在本系列的上一篇文章中,我们使用 HttpClient,从后台服务中获取了待办事项列表。 本文继续深化应用,将引入多个接界面,并在多个界面间切换(routing)
路由 (Router)
建立页面
- 建立主 (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
|
- 建立登录 (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 作为一个页面的路由组件来使用。
- 修改 app.component.html
将除第一行以外的所有代码移到新建的 home-page.component.html 文件中,并增加指令, 修改后的代码如下:
1 2
| <app-header title="Angular课程"></app-header> <router-outlet></router-outlet>
|
- 修改 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 组件
- 修改 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>
|
- 修改 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页面,自动从服务端获取待办事项列表并显示。
下一步
在下一篇文章,我们将实现登录功能并加入强制用户登录的逻辑。