Angular课程实验手册（六）

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

路由 (Router)

建立页面

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

系统输出为:

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 目录中。如下所示:

app
   + components
      + layout
      + widget
   + pages

建立登录 (Login) 界面

执行

1	ng g component pages/LoginPage

系统显示：

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 文件，可以看到如下代码:

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 页面的路由规则，改变后的代码如下：

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 文件中，修改后的代码如下：

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 中移除的代码, 修改后的代码为:

<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 中的代码, 修改后的代码如下：

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页面，自动从服务端获取待办事项列表并显示。

下一步

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