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 相关文章推荐
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
Jquery 效果使用详解
Nov 23 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
Vue利用canvas实现移动端手写板的方法
May 03 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
Vue中的transition封装组件的实现方法
Aug 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
多文件上传的例子
2006/10/09 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
关于javascript event flow 的一个bug详解
2013/09/17 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
浅谈python中的占位符
2017/11/09 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
Django如何批量创建Model
2020/09/01 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
优秀应届毕业生自荐信
2013/11/16 职场文书
秋季运动会通讯稿
2014/01/24 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
python缺失值填充方法示例代码
2022/12/24 Python