声明一下

这边要声明一下，这一篇其实应该出现在 Day07 的内容之前才对，所以，如果真的有读者 follow 我之前的文章的操作步骤来建置你的专案的话，到 Day07 的内容为止，你的专案内容应该会出错，原因是因为 Add Service 这篇的文章应该要先完成才对。

学习目标

这一篇是纪录阅读官方文件 Add services 的笔记内容。
在本章内容之前 HeroesComponent 元件，除了负责处理画面内容之外，还要负责接收资料。
这章的内容会加入一种 service 档案，让这种档案专责处理资料的商业逻辑，让元件专心负责处理画面内容。
让专案中的各种档案各司其职，也比较好管理。

创出 HeroService 档案

输入以下指令 ng generate service hero，来新增一个叫 hero 的 service 档案。

@Injectable() services

当输入以上的指令之後，应该可以看到专案中出现一个叫 hero.service.ts 的档案，档案内容有出现 @Injectable 的名称，代表这个档案是一个可注入其他地方的 service，除此之後，这个 service 档案也是可以拥有自己的注入相依套件。

取得英雄资料

HeroService 档案就用来专门接收英雄的资料。
所以，我们先来引入 Hero 和 Heroes，来定义在 HeroService 接回来的资料型别

--- hero.service.ts ---
import { Injectable } from '@angular/core';
import { HERO } from './hero';
import { HEROES } from './mock-heroes';

@Injectable({
  providedIn: 'root'
})
export class HeroService {
	// ...
  getHeroes(): HERO[] {
    return HEROES
  }
}

提供 HeroService 服务

在 Angular 专案可以将 HeroService 注入到 HeroesCompoent 元件之前，我们需要先为 HeroService 注册一个 provider。provider 就是用来创出或传递 service 档案。

那在 Angular CLI 中直接输入指令 ng generate service ，它会直接为被创出来的 service 档案的 provider 属性注册给 root 注册器。所以， HeroService 被我们创出来的时候，它预设会出现以下的内容

--- hero.service.ts ---
@Injectable({
  providedIn: 'root'
})

藉由以上的设定，我们会在 root 这个层级来提供这个 service 档案。Angular 会创出一个单一且可被分享的 service 档案且在任何档案需要这个 service 时，就可以注入给这个档案。

注入 service 到元件中

接下来，我们要将新创的 HeroService 注入 HeroesComponent 元件。
我们先将原本资料存放的 HEROES 给注解掉，因为，我们接下来必须要透过 HeroService 来接英雄的资料，而不是直接跟资料本身做存取。

--- heroes.component.ts ---
// import { HEROES } from '../mock-heroes';    将原本的资料注解掉
import { HeroService } from '../hero.service'  // 注入 HeroService 服务

@Component({
  // ...
})
export class HeroesComponent implements OnInit {

  constructor(private heroService: HeroService) { }
  // heroes = HEROES
  heroes: HERO[] = []
}

上面的内容，我们来有特别在元件的建构式的 heroService 参数设定单一实例 HeroServices。

新增 getHeroes()

接下来，我们就要在 Heroes.component.ts 档案，新增一个 getHeroes 函式来透过 HeroService 来接英雄资料进来元件中。

--- heroes.component.ts ---
getHeroes(): void {
  this.heroes = this.heroService.getHeroes();
}

取得资料的时机 - ngOnInit()

接下来就是要注意一下，呼叫取得资料的时机点，有就是要决定 getHeroes 的呼叫时机。

在官方文件中，不建议我们在元件的建构式 constructor 来做这种呼叫取得资料的操作，像是利用 HTTP 的 GET 方法来向远端来取得资料。

所以，我们会在 ngOnInit 这个 lifecycle hook 来执行这个行为。

--- heroes.component.ts ---
ngOnInit(){
	this.getHeroes();
}

接着，启动专案，这个时候，专案画面的内容应该跟之前一模一样，但是，实际上我们已经成功将接收资料的行为交由 HeroService 来达成，而 HeroesComponent 元件，就是呼叫 HeroService 中的函式，来取得资料，并将资料渲染到画面上。

元件取得资料方式的改变

以下是原本的元件取得资料的方式

加入 HeroesService 之後，元件取得资料的方式变成以下这种方式

Summary

来做个总结

1. 可以透过 ng generate service <service名称> 来新增 service 档案。
2. 在 service 档案专门处理商业逻辑，也就是专门接收资料库资料并处理资料，元件的部分要透过 service 档案来接收资料，并专心处理画面上的逻辑。