Angular课程实验手册（四）

在本系列的上一篇文章中，我们为todo-web-app项目开发了可重用的组件 = Card, 并将模拟的待办事项数据(todo)用card显示在用户界面中。这次，我们将向大家介绍Angular中另外一个重要的构件 - 服务(Service)

在上一篇文章中，待办事项的数据:tasks是在AppComponent中通过变量初始化直接写死的，而在真实的场景中，这种数据一般是通过网络从服务端获取的或是存放在本地数据库中的，或是两者都有。在Angular中，无论是访问网络还是存取本地数据库的操作，官方推荐都是放在非可视化的构件Service中。下面我们就来建立需要的服务，当然，在本文中，我们还不会从后台服务中去取数据，而只是把模拟数据的代码从AppComponent中移植到Service中，但可以把这部分的代码框架搭建完成，这样当我们讲到访问服务端时，我们指需要改相应的Service即可，而不需要再改动界面相关的代码了。

构建Service构件

在命令行执行ng g 命令，具体如下：

1
2
3

D:\todo-web-app>ng g service services\TodoSrv
CREATE src/app/services/todo-srv.service.spec.ts (339 bytes)
CREATE src/app/services/todo-srv.service.ts (136 bytes)

系统将会在 src/app/services 目录中新建一个todo-srv.service.ts的文件。打开该文件，可以看到Angular命令行已经帮助我们建立了一个服务类的模板，声明了服务类和它需要的注入器。（关于Angular中的依赖注入 - DI, 请参考我的另外一篇文章: 如何理解Angular框架依赖注入 )

修啊Service构件

下面我们改变这个类的定义如下：

import { Injectable } from '@angular/core';
import { of } from 'rxjs';

import { Todo } from '../models/todo';

@Injectable({
  providedIn: 'root'
})
export class TodoSrvService {

  tasks: Todo[] = [
    {
      "id": 1,
      "title": "task1",
      "desc": "desc1",
      "done": false
    },
    {
      "id": 2,
      "title": "task2",
      "desc": "desc2",
      "done": false
    }
  ]

  constructor() { }

  getTasks() {
    return of(this.tasks);
  }

}

可以看到，在getTasks方法中，我们返回了 Observable 接口，并在该接口的具体实现中，返回了模拟的tasks数据。

修改AppComponent

接下来，修改AppComponent.ts文件，将初始化 tasks 那段代码删除，并注入TodoSvrService类。再加入组件的声明周期方法ngOnInit, 已便于在组件启动时触发对服务的调用，从而获取数据。最后AppComponent.ts的内容如下：

import { Component, OnInit } from '@angular/core';

import { Todo } from './models/todo';
import { TodoSrvService } from './services/todo-srv.service';

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

  tasks: Todo[];

  constructor(private todoSrv: TodoSrvService) { }

  ngOnInit() {
    this.todoSrv.getTasks().subscribe(res => {
      console.log('tasks = ' + res)
      this.tasks = res;
    })
  }
  
}

接下来，重新运行 ng serve 命令，在浏览器中访问应用，看是否能正常显示数据。

下一步

在下一篇文章中，我们将带大家实验中通过Service访问真实后端的Rest服务。