发表于: 2017-05-10 21:20:55

3 1055


2017-05-10 Day050

今天完成的事情

也不知道今天都做了什么,前天的依赖注入也还没有弄好

明天计划的事情

明天看能不能看到依赖注入这部分,争取弄明白

遇到的问题

不可描述,和05-08的一样

收获

服务 Service

服务是一个广义范畴,包括:值、函数,或应用所需的特性。
几乎任何东西都可以是一个服务。 典型的服务是一个类,具有专注的、明确的用途。它应该做一件特定的事情,并把它做好。

例如:

  • 日志服务
  • 数据服务
  • 消息总线
  • 税款计算器
  • 应用程序配置

服务没有什么特别属于 Angular 的特性。 Angular 对于服务也没有什么定义。 它甚至都没有定义服务的基类,也没有地方注册一个服务。
即便如此,服务仍然是任何 Angular 应用的基础。组件就是最大的服务消费者。(为什么,因为所有的代码ts代码几乎都写在service里面)
下面是一个服务类的范例,用于把日志记录到浏览器的控制台:

src/app/logger.service.ts (class)

export class Logger {
 log(msg: any)   { console.log(msg); }
 error(msg: any) { console.error(msg); }
 warn(msg: any)  { console.warn(msg); }
}

下面是HeroService类,用于获取英雄数据,并通过一个已解析的承诺 (Promise) 返回它们。 HeroService还依赖于Logger服务和另一个用于处理服务器通讯的BackendService服务。

src/app/hero.service.ts (class)

export class HeroService {
 private heroes: Hero[] = [];
 constructor(
   private backend: BackendService,
   private logger: Logger) { }
 getHeroes() {
   this.backend.getAll(Hero).then( (heroes: Hero[]) => {
     this.logger.log(`Fetched ${heroes.length} heroes.`);
     this.heroes.push(...heroes); // fill cache
   });
   return this.heroes;
 }
}

服务无处不在。

组件类应保持精简。组件本身不从服务器获得数据、不进行验证输入,也不直接往控制台写日志。 它们把这些任务委托给服务。

组件的任务就是提供用户体验,仅此而已。它介于视图(由模板渲染)和应用逻辑(通常包括模型的某些概念)之间。 设计良好的组件为数据绑定提供属性和方法,把其它琐事都委托给服务。
Angular 不会强制要求我们遵循这些原则。 即使我们花 3000 行代码写了一个“厨房洗碗槽”组件,它也不会抱怨什么。
Angular 帮助我们遵循这些原则 —— 它让我们能轻易地把应用逻辑拆分到服务,并通过依赖注入来在组件中使用这些服务。

依赖注入 Dependency injection

屏幕快照 2017-05-09 下午7.49.40.png
“依赖注入”是提供类的新实例的一种方式,还负责处理好类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。
Angular 通过查看构造函数的参数类型得知组件需要哪些服务。 例如,HeroListComponent组件的构造函数需要一个HeroService服务:

src/app/hero-list.component.ts (constructor)

constructor(private service: HeroService) { }

当 Angular 创建组件时,会首先为组件所需的服务请求一个注入器 (injector)
注入器维护了一个服务实例的容器,存放着以前创建的实例。 如果所请求的服务实例不在容器中,注入器就会创建一个服务实例,并且添加到容器中,然后把这个服务返回给 Angular。 当所有请求的服务都被解析完并返回时,Angular 会以这些服务为参数去调用组件的构造函数。 这就是依赖注入 。

HeroService注入的过程差不多是这样的:
屏幕快照 2017-05-09 下午7.43.55.png
如果注入器还没有HeroService,它怎么知道该如何创建一个呢?

简单点说,我们必须先用注入器(injector)为HeroService注册一个提供商(provider)。 提供商用来创建或返回服务,通常就是这个服务类本身(相当于new HeroService())。

我们可以在模块中或组件中注册提供商。

但通常会把提供商添加到根模块上,以便在任何地方都使用服务的同一个实例。

src/app/app.module.ts (module providers)

providers: [
 BackendService,
 HeroService,
 Logger
],

或者,也可以在@Component元数据中的providers属性中把它注册在组件层:

src/app/hero-list.component.ts (component providers)

@Component({
 selector:    'hero-list',
 templateUrl: './hero-list.component.html',
 providers:  [ HeroService ]
})

把它注册在组件级表示该组件的每一个新实例都会有一个服务的新实例。

需要记住的关于依赖注入的要点是:

  • 依赖注入渗透在整个 Angular 框架中,被到处使用。
  • 注入器 (injector) 是本机制的核心。
    • 注入器负责维护一个容器,用于存放它创建过的服务实例。
    • 注入器能使用提供商创建一个新的服务实例。
  • 提供商是一个用于创建服务的配方。
  • 提供商注册到注入器。

好,上面的依赖注入没有问题,都是可以实现的,可能是因为没有看到后面,有些东西不明了。

好了,笔记就粘到这里吧,接着看书。


返回列表 返回列表
评论

    分享到