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 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
Javascript模板技术
Apr 27 Javascript
childNodes.length与children.length的区别
May 14 Javascript
json原理分析及实例介绍
Nov 29 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
微信小程序页面传值实例分析
Apr 19 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 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
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
Javascript实现的分页函数
2007/02/07 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
React Native实现地址挑选器功能
2017/10/24 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
numpy matrix和array的乘和加实例
2018/06/28 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
python实现低通滤波器代码
2020/02/26 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
2014端午节活动策划方案
2014/01/27 职场文书
个人工作表现评语
2014/04/30 职场文书
公司副总经理任命书
2014/06/05 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
JavaScript实现班级抽签小程序
2021/05/19 Javascript
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs