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


Posted in Javascript onJune 04, 2017

学习目录

  • Angular 4 依赖注入教程之一 依赖注入简介
  • Angular 4 依赖注入教程之二 组件服务注入
  • Angular 4 依赖注入教程之三 ClassProvider的使用
  • Angular 4 依赖注入教程之四 FactoryProvider的使用
  • Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象
  • Angular 4 依赖注入教程之六 Injectable 装饰器
  • Angular 4 依赖注入教程之七 ValueProvider的使用
  • Angular 4 依赖注入教程之八 InjectToken的使用

前言

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

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

  • Angular 4 +
  • Angular CLI
  • TypeScript

基础知识

Provider 的作用

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

  • useClass
  • useValue
  • useExisting
  • useFactory

Angular 4依赖注入学习教程之ClassProvider的使用(三)
(图一:注入器、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';
}

总结

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

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
javascript 流畅动画实现原理
Sep 08 Javascript
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 #Javascript
JavaScript箭头(arrow)函数详解
Jun 04 #Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 #Javascript
angularJs中datatable实现代码
Jun 03 #Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 #Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 #Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 #Javascript
You might like
mysql建立外键
2006/11/25 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
常用js脚本
2006/12/03 Javascript
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
js常用代码段收集
2011/10/28 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
解决Python中pandas读取*.csv文件出现编码问题
2019/07/12 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
自考生自我鉴定范文
2013/10/01 职场文书
公司出纳岗位职责
2013/12/07 职场文书
社区八一活动方案
2014/02/03 职场文书
法学函授自我鉴定
2014/02/06 职场文书
餐厅总厨求职信
2014/03/04 职场文书
一年级小学生评语大全
2014/12/25 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA