Angular 4依赖注入学习教程之ClassProvider的使用(三)

 更新时间:2017年06月04日 09:25:55   作者:semlinker  
这篇文章主要给大家介绍了关于Angular 4依赖注入之ClassProvider使用的相关资料,文中介绍的非常详细,对大家学习或者使用Angular 4具有一定的参考学习价值,需要的朋友可以参考借鉴,下面来一起看看吧。

学习目录

前言

本文属于Angular 4依赖注入学习系列文章的第三篇,主要给大家介绍了Angular 4依赖注入之ClassProvider使用的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:

本系列教程的开发环境及开发语言:

基础知识

Provider 的作用

Angular 中我们通过 Provider 来描述与 Token 相关联的依赖对象的创建方式。在 Angular 中依赖对象的创建方式分为以下四种:

  • useClass
  • useValue
  • useExisting
  • useFactory


(图一:注入器、Provider与依赖对象关系)

Provider 的分类

在 Angular 中 Provider 主要分为:

  • TypeProvider
  • ClassProvider
  • ValueProvider
  • ExistingProvider
  • FactoryProvider

ClassProvider

ClassProvider 接口定义

export interface ClassProvider {
 // 用于设置与依赖对象关联的Token值,Token值可能是Type、InjectionToken、
 // OpaqueToken的实例或字符串
 provide: any; 
 useClass: Type<any>;
 // 用于标识是否multiple providers,若是multiple类型,则返回与Token关联的依赖
 // 对象列表
 multi?: boolean; 
}

看完上面的接口定义,相信一些读者会觉得陌生。在本系列教程第二小节中,我们用到了 TypeProvider。

不信你往下看:

@NgModule({
 ...
 providers: [HeroService], // 方式一
 bootstrap: [AppComponent]
})
export class AppModule { }

// TypeProvider接口
export interface TypeProvider extends Type<any> {}

那跟 ClassProvider 有什么关系?先不急,请你继续往下看:

@NgModule({
 ...
 providers: [{
 provide: HeroService, useClass: HeroService // 方式二
 }],
 bootstrap: [AppComponent]
})
export class AppModule { }

是不是终于看到了 useClass 。其实上面两种方式是等价的,方式一更加简洁,方式二是采用标准的语法哈。那么问题来了,什么时候要使用 useClass 语法?回答这个问题前,我们先看个需求。

假设由于业务需要,先前我们定义的 HeroService 的数据,需要从服务器获取,而不是使用静态数据。项目采用前后端分离的开发方式进行开发,此外在项目开发前已经协商好数据格式,也给出了对应的模拟数据(测试数据)。

那么除了修改原有的 HeroService 服务外,有没有其它方式可以方便地验证一下模拟数据,同时保持较小的改动量哈。其实我们可以创建一个新的数据服务,如 MockHeroService ,具体实现如下:

创建 MockHeroService 服务

export class MockHeroService {
 heros: Array<{ id: number; name: string }> = [
 { id: 16, name: 'RubberMan' },
 { id: 17, name: 'Dynama' },
 { id: 18, name: 'Dr IQ' },
 { id: 19, name: 'Magma' },
 { id: 20, name: 'Tornado' }
 ];

 getHeros() {
 return this.heros;
 }
}

使用 MockHeroService 服务

@NgModule({
 ...
 providers: [{
 provide: HeroService, useClass: MockHeroService
 }],
 bootstrap: [AppComponent]
})
export class AppModule { }

更新完相关的代码,正常情况下,在 http://localhost:4200/ 页面,你将看到以下的内容:

ID: 16 - Name: RubberMan
ID: 17 - Name: Dynama
ID: 18 - Name: Dr IQ
ID: 19 - Name: Magma
ID: 20 - Name: Tornado

其实服务命名为 MockHeroService 的目的,也是为了说明依赖注入的好处,即易于进行本地单元测试。此外假设没有利用 Angular 依赖注入的特性,我们需要修改应用中每个应用到 HeroService 的地方。

我有话说

ClassProvider 接口中的 Type 类型是什么?

export interface Type<T> extends Function { new (...args: any[]): T; }

export function isType(v: any): v is Type<any> {
 return typeof v === 'function';
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • AngularJS中的表单简单入门

    AngularJS中的表单简单入门

    本文主要介绍AngularJS 表单,这里对AngularJS 表单知识做了详细整理介绍,希望能帮助有需要的小伙伴
    2016-07-07
  • protractor的安装与基本使用教程

    protractor的安装与基本使用教程

    这篇文章主要给大家介绍了关于protractor安装与基本使用的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • angularjs自定义过滤器demo示例

    angularjs自定义过滤器demo示例

    这篇文章主要介绍了angularjs自定义过滤器,结合完整实例形式分析了angularjs自定义过滤器相关原理、使用方法及操作注意事项,需要的朋友可以参考下
    2019-08-08
  • AngularJS使用ocLazyLoad实现js延迟加载

    AngularJS使用ocLazyLoad实现js延迟加载

    这篇文章主要介绍了AngularJS使用ocLazyLoad实现js延迟加载的相关资料,需要的朋友可以参考下
    2017-07-07
  • AngularJS中重新加载当前路由页面的方法

    AngularJS中重新加载当前路由页面的方法

    下面小编就为大家分享一篇AngularJS中重新加载当前路由页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • angular4 获取wifi列表中文显示乱码问题的解决

    angular4 获取wifi列表中文显示乱码问题的解决

    这篇文章主要介绍了angular4 获取wifi列表中文显示乱码问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • Angularjs中的$apply及优化使用详解

    Angularjs中的$apply及优化使用详解

    angular js的双向数据绑定,在开发中起到的作用灰常大,所以下面这篇文章主要给大家介绍了关于Angularjs中$apply及优化使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧
    2018-07-07
  • AngularJS表单编辑提交功能实例

    AngularJS表单编辑提交功能实例

    这篇文章主要介绍了AngularJS表单编辑提交功能实例,本文讲解如何修改表单的默认值,需要的朋友可以参考下
    2015-02-02
  • Angular.Js之Scope作用域的学习教程

    Angular.Js之Scope作用域的学习教程

    这篇文章主要给大家分享了关于Angular.Js之Scope作用域的学习教程 ,文中通过多个示例代码介绍的非常详细,相信对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-04-04
  • 详解Monaco Editor中的Keybinding机制

    详解Monaco Editor中的Keybinding机制

    这篇文章主要为大家介绍了详解Monaco Editor中的Keybinding机制详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09

最新评论