分享人:余翼
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
以前原始社会,我们需要斧子,然而由于还没有社会分工,只能自己打磨一把使用,对应在程序上是我们需要一个功能的时候只能自己创建,然后使用new等关键字来调用方法。
然后工业社会阶段,我们需要使用斧子的时候,只需要找到工厂,购买斧子就可以使用,共产主义社会,需要斧子的时候甚至不需要购买,直接坐等社会提供。
依赖注入的意思就是我们需要的东西不是我们自己创建的,而是第三方提供的,我们只需要引用就可以使用了。不需要的时候就不引用它。
依赖注入用来解决组件之间依赖关系、配置及生命周期管理, 通过转移对象控制权,可以解决类之间的耦合问题, 对象与对象之间是松散耦合关系,更重要的是使得应用程序体系结构变得非常灵活, 很好的体现了面向对象的设计法则之一---依赖设计原则
一般来说,一个对象只能通过三种方法来得到它的依赖项目:
1.我们可以在对象内部创建依赖项目
2.我们可以将依赖作为一个全局变量来进行查找或引用
3.我们可以将依赖传递到需要它的地方
在使用依赖注入时,我们采用的是第三种方式(另外两种方式都会引起其他困难的挑战,例如污染全局作用域以及使隔离变得几乎不可能)。依赖注入是一种设计模式,它移除了硬编码依赖,因此使得我们可以在运行中随时移除并改变依赖项目。
作用一:可以使我们能够轻松对组件进行测试
作用二:降低代码的逻辑复杂度
angular提供了几种很好的依赖注入机制,以下5个核心组件用来作为依赖注入:value、factory、service、provider、constant
// 定义一个模块
var myApp = angular.module("myApp", []);
// 创建 value 对象 "defaultInput" 并传递数据
myApp.value("defaultInput", 5);
// 将 "defaultInput" 注入到控制器
myApp.controller('MyController', function($scope,defaultInput) {
$scope.number = defaultInput;
console.log($scope.number);
});
var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
var mainApp = angular.module("mainApp", []);
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
$scope.number = defaultInput;
$scope.result = CalcService.square($scope.number);
$scope.square = function() {
$scope.result = CalcService.square($scope.number);
}
});
var mainApp = angular.module("mainApp", []);
mainApp.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});
mainApp.constant("configParam", "constant value");
AngularJS依赖注入的方法
AngularJS提供了显式的方法来明确定义一个函数在被调用时需要用到的依赖关系。
通过这种方法声明依赖,即使在源代码被压缩、参数名称发生改变的情况下依然能够正常工作。
对上面代码的解释:
我们给我们的函数设置的参数名称分别是s和t,然后我们在后面使用MyController["$inject"] = ["$scope", "$timeout"];显式的将我们需要的依赖注入到MyController函数中;所以在MyController函数中,s代表$scope,t代表$timeout。
对于这种声明方式来讲,参数的顺序是十分重要的,因为$inject数组元素的顺序必须和注入的参数的顺序一一对应。
AngularJS提供的行内注入方法实际上是一种语法糖,它与前面的提到的通过$inject属性进行声明的原理是一样的,但是允许我们在函数定义的时候从行内将参数传入,这种方法方便,简单,而且避免了在定义的过程中使用临时变量。
行内声明的方式允许我们直接传入一个参数数组,而不是一个函数。数组的元素是字符串,它们代表的是可以被注入到对象中的依赖名字,最后一个参数就是依赖注入的目标函数对象本身。
AngularJS中的依赖注入与不用依赖注入的其他框架相比,有何优点?
一、模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令;
二、是一个比较完善的前端MVC框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能;
三、依赖注入简化了组件之间处理依赖的过程(即解决依赖)。没有依赖注入,就不得不以某种方式自己查找$scope,很可能得使用全局变量。这虽然能够工作,但是不如AngularJS的依赖注入技术这么简单。
四、在开发中使用依赖注入的主要好处是AngularJS负责管理组件并在需要的时候提供给相应函数。依赖注入还能够为测试带来好处,因为它允许你使用假的或者模拟的对象来代替真实的组件,从而让开发者专注于程序的特定部分。
AngularJS中的依赖注入组件的应用场景?
感谢大家观看
BY : 余翼