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 相关文章推荐
Js 随机数产生6位数字
May 13 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
有关Promises异步问题详解
Nov 13 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 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
PHP可逆加密/解密函数分享
2012/09/25 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
Python调用服务接口的实例
2019/01/03 Python
实例讲解Python3中abs()函数
2019/02/19 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
报关简历自我评价怎么写
2013/09/19 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
火车来了教学反思
2014/02/11 职场文书
2014年预备党员群众路线教育实践活动对照检查材料思想汇报
2014/10/02 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
捐助倡议书
2015/01/19 职场文书
大学副班长竞选稿
2015/11/21 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
Go语言读取txt文档的操作方法
2022/01/22 Golang