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 学习笔记一
Apr 07 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
JS返回顶部实例代码
Aug 09 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
微信小程序常用简易小函数总结
Feb 01 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
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
Gird事件机制初级读本
2007/03/10 Javascript
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
Javascript继承机制详解
2017/05/30 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
es6函数之rest参数用法实例分析
2020/04/18 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
Python中几种操作字符串的方法的介绍
2015/04/09 Python
python实现清屏的方法
2015/04/30 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
python日期相关操作实例小结
2019/06/24 Python
python调试神器PySnooper的使用
2019/07/03 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
自学python用什么系统好
2020/06/23 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
《独坐敬亭山》教学反思
2014/04/08 职场文书
学校师德承诺书
2014/05/23 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
创建文明城市倡议书
2015/04/28 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
新娘婚礼答谢词
2015/09/29 职场文书