AngularJs 的依赖注入

1-1 依赖注入介绍

依赖注入的介绍

“依赖”：当一个对象在创建的时候必须依赖另外一个对象。Exp. Var a = newA(); a依赖A。

“注入”：生命依赖关系之后，angular通过injector注入器所依赖的对象进行“注入”操作。
1. 依赖注入的原理
  
  每个Angular应用都存在一个injector注入器来处理依赖关系，注入器就是一个负责帮你查找和创建依赖的服务定位器。注入器对象具有get函数，可以获得任何被定义过的服务实例。
2. ```
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>依赖注入</title><script src="components/angular/angular.min.js"></script><style>.body{font-size: 5em;}.show{border: solid 1px black;}</style>
</head>
<body ng-app="a4_1"><div ng-controller="c4_1"><div class="{{cls}}">{{show}}</div><button ng-click="onClick()">click here</button></div><script>var a4_1 = angular.module('a4_1',[]);a4_1.config(function($controllerProvider){$controllerProvider.register('c4_1',['$scope',function($scope){$scope.cls = '';$scope.onClick = function(){$scope.cls = 'show';$scope.show = 'click here to show the information';}}]);});</script>
</body>
</html>
```
3. 代码解析
  1. 创建模块之后我们并没有调用模块的控制器函数controller,而是调用config函数进行服务注册，这是因为在实际的代码执行过程，下面的代码执行后的功能是相同的。
```
a4_1.controller('c4_1',['$scope',function($scope){
//控制器代码
}]);
```
```
a4_1.config(function($controllerProvider){
$controllerProvider.register('c4_1',['$scope',function($scope){
//控制器代码
}
}]);
})
```
  2. 在angular中执行的本质是第二段代码，在Angular中可以通过模块中的config函数来声明需要注入的依赖对象，而声明的方式就是通过provider的服务。但在Angular内部controller控制器是通过controllerProvider服务创建的。因此用户在创建一个控制的时候是在config中调用controllerProvider服务的register方法，来完成一个控制器的创建，控制器创建之后，则再调用injector注入器完成各个依赖对象的注入。

1-2依赖注入的实例

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="components/angular/angular.min.js"></script><style>.show{border: solid 1px black;}</style>
</head>
<body ng-app="a4_2"><div ng-controller="c4_2"><div><div class="{{cls}}">{{text}}</div><button ng-click="onClick(1)">morning</button><button ng-click="onClick(2)">morning up</button><button ng-click="onClick(3)">afternoon</button><button ng-click="onClick(4)">evening</button></div></div><script>var a4_2 = angular.module('a4_2',[]);a4_2.config(function($provide){$provide.provider('show_1',function(){this.$get = function(){return {val : function(name){return name;}}}});});a4_2.config(function($provide){$provide.factory('show_2',function(){return {val:function(name){return name;}};});});a4_2.config(function($provide){$provide.value('show_3',function(name){return name;});});a4_2.config(function($provide){$provide.service('show_4',function(){var self = {};self.val = function(name){return name;}return self;})});a4_2.controller('c4_2',function($scope,show_1,show_2,show_3,show_4){$scope.cls = '';$scope.onClick = function(t){$scope.cls = 'show';switch (t) {case 1:$scope.text = show_1.val('good morning');break;case 2:$scope.text = show_2.val('good morning up');break;case 3:$scope.text = show_3('good afternoon');break;case 4:$scope.text = show_4.val('good evening');break;default:break;}}});</script>
</body>
</html>

知识点

在定义模版中的控制器层代码时，将这些定义好的变量全部作为依赖注入变量来使用。当页面在解析这段代码时，angular将启动$provide，并返回多个与服务一一对应的实例，通过这些实例来分别处理这些注入变量对应的函数功能，但对于开发者来说，只要注入变量就可以。

1-3 依赖注入标记

推断式注入
1. 介绍
  
  在没有明确声明下面，Angular会认定参数名称就是依赖注入的函数名，并在内部调用函数对象的toString()方法，获取对应的参数列表。
2. 代码
```
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>推断注入</title><script src="components/angular/angular.min.js"></script>
</head>
<body ng-app="a4_3"><div ng-controller="c4_3"><input id="btnAlert" type="button" value="alert the infor" ng-click="onClick('alert sucecss')"></div><script>var a4_3 = angular.module('a4_3',[]).factory('$show',function($window){return{show : function(text){$window.alert(text);}}}).controller('c4_3',function($scope,$show){$scope.onClick = function(msg){$show.show(msg);}})</script>
</body>
</html>
```
3. 解释
  
  在编写应用控制器代码时，由于在注入服务过程，没有使用[]或进行标记式的注入生命，因此注入器inject根据参数的名称来推断服务和控制器的关系。
  
  angular自动通过annotate函数自动提取实例化参数时传递来的列表，并最终通过注入器将这些列表注入控制器中。需要说明的是：这种注入方式不需要关注注入时参数的先后顺序，angular会根据依赖的程度自动处理，由于angular需要根据参数列表分析注入服务，因此，这种注入的方式不能处理压缩或者混淆后的代码，只能处理源码。

标记式注入

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>推断注入</title><script src="components/angular/angular.min.js"></script>
</head><body ng-app="a4_3"><div ng-controller="c4_3"><div>{{text}}</div><input id="btnAlert" type="button" value="alert the infor" ng-click="onShow('alert sucecss')"><input id="btnAlert" type="button" value="write the infor" ng-click="onWrite('write sucecss')"></div><script>var c4_3 =function($scope,$show,$write){$scope.onShow = function(msg){$show.show(msg);}$scope.onWrite = function(msg){$scope.text = $write.write(msg);}}c4_3.$inject = ['$scope','$show','$write'];var a4_3 = angular.module('a4_3', []).factory('$show', function ($window) {return {show: function (text) {$window.alert(text);}}}).factory('$write', function () {return {write: function (text) {return text;}}}).controller('c4_3', c4_3)</script>
</body></html>

解释

控制函数通过调用$inject属性，向函数中注入了3个服务，注入服务名和顺序必须与函数在构造时的参数名和顺序完全一致，否则，将出现错误异常。

行内式注入

介绍

行内注入指的是在构建一个Angular对象时，允许开发人员将一个字符串数组作为对象的参数，而不仅仅是一个函数，在这个数组中，除最后一个必须是函数体外，其余代表的都是注入对象的服务，而他们的名称和顺序与最后一个函数的参数是一一对应的。

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>行内注入</title><script src="components/angular/angular.min.js"></script>
</head>
<body ng-app="a4_3"><div ng-controller="c4_3"><input id="btnAlert" type="button" value="alert the infor" ng-click="onClick('alert sucecss')"></div><script>var a4_3 = angular.module('a4_3',[]).factory('$show',function($window){return{show : function(text){$window.alert(text);}}}).controller('c4_3',['$scope','$show',function($scope,$show){$scope.onClick = function(msg){$show.show(msg+'1');}}])</script>
</body>
</html>

解释

在注入的函数体中声明与服务名一一对应的参数，以用于函数体内部的调用，由于这种方式仍然是分析并处理注入字符数组中的内容，因此，即使是压缩或混淆后的代码，这种方式可以使用。

$injector常用API

has和get方法
1. injector.has(name)
  
  injector 为获取的$injector对象，name为需要查找的服务名称。执行上述代码，返回一个布尔值，true为找到名称对应的服务，false表示没有找到。
2. Injector.get(name)
  
  injector 为获取的$injector对象，name为需要查找的服务名称。执行上述代码后，将直接返回一个服务实例。

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="components/angular/angular.min.js"></script>
</head>
</head>
<body ng-app="a4_6"><div ng-controller="c4_6"></div><script>var a4_6 = angular.module('a4_6',[]).factory('$custom',function(){return {print:function(msg){console.log(msg);}}});var injector = angular.injector(['a4_6','ng']);  var has = injector.has('$custom');console.log(has);if(has){console.log('has方法实现');var custom = injector.get('$custom');custom.print('get方法实现');}a4_6.controller('c4_6',['$scope','$custom',function($scope,$custom){$custom.print('controller调用');}]);</script>
</body>
</html>

解析：

var injector = angular.injector([‘a4_6’,’ng’]); 这句代码是为了注册服务。

invoke方法
1. 介绍
  
  invoke 是一个比较强大的API，他最为常用的场景就是执行一个自定义函数。除此之外，在执行函数的时候，还能传递变量给函数自身，调用格式如下：
  
  injector.invoke(fn,[self],[locals])
  
  Injector 是获取的$injector对象，参数fn为需要执行的函数名称，可选参数self 是一个对象，表示用于函数的this变量，可选项参数locals也是一个对象，他也能为函数中的变量名的传递提供方法支持。
2. 代码
```
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="components/angular/angular.min.js"></script>
</head>
</head>
<body ng-app="a4_7"><div ng-controller="c4_7"></div><script>var a4_7 = angular.module('a4_7',[]).factory('$custom',function(){return {print:function(msg){console.log(msg);}}});var injector = angular.injector(['a4_7','ng']);  var has = injector.has('$custom');console.log(has);//非显示指定注入项var invokTest = function($custom){$custom.print('invok success');};if(has){console.log('has方法实现');// injector.invoke(invokTest);//invoke 显示指定注入项，AngularJS采用依赖项数数组方法解决代码压缩混淆注入的问题injector.invoke(['$custom',function($custom){this.text = 'invok success1';$custom.print(this.text);}],self);}a4_7.controller('c4_7',['$scope','$custom',function($scope,$custom){$custom.print('controller调用');}]);</script>
</body>
</html>
```
解析
1. 使用注入器的invoke()方法，可以直接调用一个用户自定义的函数体，并通过函数参数注入进来的对象.
```
angular.injector(['ng'])
.invoke(function($http){// do sth. with $http
});
```
  也可以使用注入器的get()方法，获得指定名称的服务实例：
```
var my$http = angular.injector(['ng']).get('$http'); 2 // do sth. with my$http  
```
2. 当采用invoke方式调用组件服务时，AngularJS通过检查函数的参数名确定需要注入什么对象
```
angular.injector(['ng'])
.invoke(function($http){// do sth. with $http
});
```
  AngularJS执行invoke时，检查函数的参数表，发现并注入$http对象。
  
  这样有一个问题，就是当我们对JavaScript代码进行压缩处理时，$http可能会被变更成其他名称，这将导致注入失败。
3. 显示指定注入项
  
  AngularJS采用依赖项数数组方法解决代码压缩混淆注入的问题：
```
angular.injector(['ng'])
.invoke(["$http","$compile",function($http,$compile){// do sth. with $http,$compile
}]);
```
  这是传入invoke的是一个数组，数组的最后一项是实际要执行的函数，数组的其他项则指明需要向该函数注入的对象。invoke将按照数组中的顺序，依次向函数注入依赖对象。也就是说上面代码中绿色部分 $，http，$ compile是可以为任意名称的。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

AngularJS基础之依赖注入的几种方法
分类：AngularJS基础版权声明：本文为博主原创文章，未经博主允许不得转载。目录(?)[] 本文参考AngularJS权威指南概念依赖注入是一种设计模式，它可以去除对依赖关系的硬编码，从而可以在运行时改变甚至移除依赖关系。…...
2024/4/21 4:56:58
angular源码分析：angular中的依赖注入式如何实现的
一、准备 angular的源码一份，我这里使用的是v1.4.7。源码的获取，请参考我另一篇博文：angular源码分析：angular源代码的获取与编译环境安装二、什么是依赖注入据我所知，依赖注入的概念最早使用时在java编程中。依赖注…...
2024/5/3 23:29:09
AngularJS 依赖注入深入理解
AngularJS 依赖注入什么是依赖注入? 是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了…...
2024/4/21 4:56:56
原创：Javascript DI！Angular依赖注入的实现原理
DI是Angular的特色功能，而在Angular 2.0的计划中，DI将成为一个独立的模块，参见 https://github.com/angular/di.js 这意味着它也有机会被用于nodejs等技术中，其他前端框架也完全有机会使用它。 DI简介对于后端程序员，…...
2024/4/21 4:56:54
Angular08 依赖注入
1 angular应用中依赖注入的工作原理技巧01：在模块级别进行注册时所有在应用级别的组件都可以使用，因为主模块会导入其他模块，所以在模块中注入就相当于在主模块进行注入操作；懒加载的模块除外技巧02：在模块的根组件注…...
2024/4/21 4:56:53
[译] 关于 Angular 依赖注入你需要知道的
如果你之前没有深入了解 Angular 依赖注入系统，那你现在可能认为 Angular 程序内的根注入器包含所有合并的服务提供商，每一个组件都有它自己的注入器，延迟加载模块有它自己的注入器。但是，仅仅知道这些可能还不够呢？ …...
2024/4/21 4:56:53
angularjs 依赖注入原理与实现
在用angular依赖注入时，感觉很好用，他的出现是为了“削减计算机程序的耦合问题” ，我怀着敬畏与好奇的心情，轻轻的走进了angular源码，看看他到底是怎么实现的，我也想写个这么牛逼的功能。于是就模仿着写了…...
2024/4/21 4:56:51
掌握Angular2的依赖注入
我们这一篇文章还是以QuickStart项目为基础,从头开始讲解怎么在Angular2中使用依赖注入,如果你按照本篇文章中讲解的示例亲自走一遍的话,你一定能够掌握如何在Angular2中使用依赖注入.好,废话不多说,开始我们今天的旅行吧! 我们首先将项目中的内联模板替换为一个模板文件,使用…...
2024/4/21 4:56:51
Javascript DI！Angular依赖注入的实现原理
JavaScript中实现DI的原理在JavaScript中实现DI，看起来难，实际上原理很简单，它的核心技术是Function对象的toString()。我们都知道，对一个函数对象执行toString()，它的返回值是函数的源码，知道了这一点&am…...
2024/4/21 4:56:49
Angular开发必备插件一览表
1. Angular-cli 初始化，开发，构建和维护Angular应用程序的命令行界面工具。安装 npm install -g angular/cli 命令列表 ng help ng new my-first-project cd my-first-project ng serve 多模块创建默认创建单模块创建多模块 ng new my-workspa…...
2024/4/20 19:39:44
angular开发的IDE环境搭建
试了两种，Visual Studio 2015 和 Visual Studio Code，遇到问题记录下，以备之后忘记了，有据可查1.Visual Studio 2015搭建参照下文，但最后我卡在了编译上，编译运行卡死，发现不能加载app下的.ts文…...
2024/4/20 19:39:43
几款移动跨平台App开发框架比较
海豚精灵：https://www.whhtjl.com；优课GO：https://mgo.whhtjl.com 整理目前流行的跨平台WebApp开发技术的特点，仅供参考。每个框架几乎都包含以下特性： 使用 HTML5 CSS JavaScript 开发；跨平台重用代…...
2024/4/20 19:39:42
02 ionic+angular开发webapp笔记
Angular js 的特性： MVC 模块化和依赖注入双向数据绑定指令和ui控件 MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、…...
2024/4/20 19:39:41
Angular8 开发（二）
前面已经说到了基本的集成可开发准备工作，Angular 开发（一）。接下来开始逻辑部分的编写目录大纲段子列表获取，路由跳转详情获取段子详情音乐列表搜渲染搜索的音乐列表和播放音乐总结段子列表获取，路由跳转详情新建段…...
2024/4/21 4:56:48
angular 开发项目
pc端 angular 5 浏览器支持 IE10 google浏览器火狐浏览器移动端 angular5 Ionic3 什么是混合开发？ 简单来说，就是在开发移动应用中同时使用Native和Web的开发方式。什么是Ionic3框架？ Ionic3框架是一个混合开发框架，其本身…...
2024/4/26 11:51:09
JAVAWeb对ajax中get与post的使用
JAVAWeb对ajax中get与post的使用 01.使用背景及ajax的介绍 02.ajax的一些属性 03.使用案例 03.1.基本介绍 03.2.代码详解 03.3.代码运行结果04.总结JAVAWeb对ajax中get与post的使用01.使用背景及ajax的介绍在进行javaWeb的开发中难免会遇到异步请求的情况，为了使网站局部的信息…...
2024/4/21 4:56:47
angular开发快捷操作
创建项目 ng new my-app快速创建新组件： ng generate component views/user创建service ng g service services/my-service如果缺少依赖rxjs npm install rxjs-compat //需重启生效快速自定义管道文件(pipe) ng g p sexReform...
2024/4/21 4:56:46
十款移动APP开发框架
十款移动APP开发框架: 1.jquery mobile框架 2.bootstrap框架 3.ionic框架 4.Mobile Angular UI框架 5.Intel XDK框架 6.Appcelerator Titanium框架 7.Sencha Touch框架 8.Kendo UI框架 9.PhoneGap框架 10.mui框架 1.jquery mobile框架 jQuery Mobile是jQuery 在手机上和平板设备…...
2024/4/21 4:56:44
AngularJS事件
一.事件 1.ng-click 指令允许当一个元素被点击后执行指定的表达式。 <input type"button" value"add-count" ng-click"countcount1" ng-init"count0;" />{{count}} //鼠标单击事件，不用多说 2.ng-dblclick ng-db…...
2024/4/21 4:56:43
ag-grid 学习笔记五：ag-grid事件（onRowClicked行点击事件、onCellClicked单击单元格事件、onCellDoubleClicked双击单元格事件、全部事件列表）
一 onRowClicked行点击事件此事件发生在点击表格行的时候，事件写在gridOptions下。 onRowClicked: function (event) {//event.data 选中的行内数据，event.event 为鼠标事件，等其他。可以log自己看一下console.log(a row was clicked, event…...
2024/5/2 19:27:07

AngularJs 的依赖注入

AngularJs 的依赖注入

1-1 依赖注入介绍

1-2依赖注入的实例

1-3 依赖注入标记

$injector常用API

相关文章

最新文章