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 相关文章推荐
用JavaScript和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
javascript列表框操作函数集合汇总
Nov 28 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
jquery实现submit提交表单
Feb 03 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 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下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
thinkPHP分页功能实例详解
2017/05/05 PHP
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
给Python入门者的一些编程建议
2015/06/15 Python
Python对文件操作知识汇总
2016/05/15 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
numpy.array 操作使用简单总结
2019/11/08 Python
python实现门限回归方式
2020/02/29 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
Python datetime模块的使用示例
2021/02/02 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
药品业务员岗位职责
2014/04/17 职场文书
学校节能减排方案
2014/06/13 职场文书
2014年政协工作总结
2014/12/09 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
python异常中else的实例用法
2021/06/15 Python
Oracle用户管理及赋权
2022/04/24 Oracle