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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 Javascript
layui递归实现动态左侧菜单
Jul 26 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
杏林同学录(六)
2006/10/09 PHP
MySQL授权问题总结
2007/05/06 PHP
解析php中memcache的应用
2013/06/18 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
chrome调试javascript详解
2015/10/21 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
js 发布订阅模式的实例讲解
2017/09/10 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Python3+Appium安装使用教程
2019/07/05 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
爱岗敬业演讲稿范文
2014/01/14 职场文书
总结表彰大会主持词
2014/03/26 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
Golang日志包的使用
2022/04/20 Golang