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 相关文章推荐
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 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中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
清空上传控件input file的值
2010/07/03 Javascript
jquery 插件开发备注
2010/08/27 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
javascript中this关键字详解
2016/12/12 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
PyTorch预训练的实现
2019/09/18 Python
Django 自定义分页器的实现代码
2019/11/24 Python
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
大学生农村教师实习自我鉴定
2013/09/21 职场文书
模具毕业生推荐信
2014/02/15 职场文书
迎新晚会主持词
2014/03/24 职场文书
小学家长评语大全
2014/04/16 职场文书
管理提升方案
2014/06/04 职场文书
法定代表人资格证明书
2014/09/11 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL