Angular 4依赖注入学习教程之简介(一)


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 +
  • Angular CLI
  • TypeScript

基础知识

Angular CLI 基本使用

1、安装 Angular CLI (可选)

npm install -g @angular/cli

2、创建新的项目

ng new PROJECT-NAME

3、启动本地服务器

cd PROJECT-NAME
ng serve

依赖注入简介

在介绍依赖注入的概念和作用前,我们先来看个例子。各位看官请睁大眼睛,我要开始 "闭门造车" 了。

示例说明

一辆车内部构造很复杂,出于简单考虑,我们就只考虑三个部分:车身、车门和引擎。接下来我们来定义各个部分。

1.定义车身类

export default class Body { }

2.定义车门类

export default class Doors { }

3.定义车引擎类

export default class Engine {
 start() {
 console.log('?开动鸟~~~');
 }
}

4.定义汽车类

import Engine from './engine';
import Doors from './doors';
import Body from './body';

export default class Car {
 engine: Engine;
 doors: Doors;
 body: Body;

 constructor() {
 this.engine = new Engine();
 this.body = new Body();
 this.doors = new Doors();
 }

 run() {
 this.engine.start();
 }
}

一切已准备就绪,我们马上来造一辆车:

let car = new Car(); // 造辆新车
car.run(); // 开车上路咯

车已经可以成功上路,但却存在以下问题:

  • 问题一:在创建新车的时候,你没有选择,假设你想更换汽车引擎的话,按照目前的方案,是实现不了的。
  • 问题二:在汽车类内部,你需要在构造函数中手动去创建各个部件。

为了解决第一个问题,提供更灵活的方案,我们可以重构一下已定义的汽车类,具体如下:

export default class Car {
 engine: Engine;
 doors: Doors;
 body: Body;

 constructor(engine, body, doors) {
 this.engine = engine;
 this.body = body;
 this.doors = doors;
 }

 run() {
 this.engine.start();
 }
}

重构完汽车类,我们来重新造辆新车:

let engine = new NewEngine();
let body = new Body();
let doors = new Doors();
this.car = new Car(engine, body, doors);
this.car.run();

此时我们已经解决了上面提到的第一个问题,要解决第二个问题我们要先介绍一下依赖注入的概念。

依赖注入的概念

在软件工程中,依赖注入是种实现控制反转用于解决依赖性设计模式。一个依赖关系指的是可被利用的一种对象(即服务提供端) 。依赖注入是将所依赖的传递给将使用的从属对象(即客户端)。该服务是将会变成客户端的状态的一部分。 传递服务给客户端,而非允许客户端来建立或寻找服务,是本设计模式的基本要求。 —— 维基百科

看完概念是不是已经晕了,其实我们只要记住依赖注入的三种角色:使用者、服务(依赖对象)及注入器(Injector)。接下来我们马上来看一下 Angular 中依赖注入的应用。

Angular 依赖注入的应用

更新后的汽车类

@Injectable()
export default class Car {
 constructor(
 private engine: Engine, 
 private body: Body, 
 private doors: Doors) {}
 
 run() {
 this.engine.start();
 }
};

具体应用

import { ReflectiveInjector } from '@angular/core';

let injector = ReflectiveInjector.resolveAndCreate([Car, 
 Engine, Doors, Body]);
let car = injector.get(Car);
car.run();

看完上面的示例,我们前面提到的第二个问题,已经完美解决了哈。

总结

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

Javascript 相关文章推荐
纯JS实现的批量图片预览加载功能
Aug 14 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 Javascript
angularJs中datatable实现代码
Jun 03 #Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 #Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 #Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 #Javascript
利用vueJs实现图片轮播实例代码
Jun 03 #Javascript
angular中使用Socket.io实例代码
Jun 03 #Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 #jQuery
You might like
Terran剧情介绍
2020/03/14 星际争霸
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
jupyter notebook 重装教程
2020/04/16 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
Python如何实现爬取B站视频
2020/05/20 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
《鸟的天堂》教学反思
2014/02/27 职场文书
英文推荐信格式范文
2014/05/09 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
师德师风自我评价范文
2014/09/11 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
利用Apache Common将java对象池化的问题
2022/06/16 Servers