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从头学起第四讲 jquery入门教程
Aug 01 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
bootstrap fileinput完整实例分享
Nov 08 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 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
PHP的运行机制与原理(底层)
2015/11/16 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
日期 时间js控件
2009/05/07 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
keras topN显示,自编写代码案例
2020/07/03 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
毕业生在校学习的自我评价分享
2013/10/08 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
python实现Thrift服务端的方法
2021/04/20 Python