angularJs三种依赖注入方式与minify

时间:2022-07-07 14:20:44

依赖注入(饭来伸手,一来张口)DI,Dependency Injectio

AngularJs使用module“名字/对象”注册表来作为容器,实现DI。

依赖注解有三种方式,(数组标注、添加$inject属性、隐式声明)。

其中前两种在代码minify时不会被破坏,推荐使用第一种方式。

第二种方式可以自己手动改写(下面有例子),也可以使用工具ngAnnotate对隐式声明进行统一改写。

第三种方式,书写最为简单明了,但是不能对它直接进行minify,需要改写为前两种。

   angular在执行某些方法(例如在服务的工厂方法、控制器构造方法)时会借助注入器(injector)。 因此我们需要在这些方法中加入标注来通知注入器哪些依赖需要被注入。可以通过以下三种方式注入服务:

- 通过数组标注在方法的参数中声明依赖(优先考虑)

- 定义在控制器构造方法的$inject属性中

- 通过方法参数名隐式的添加(有些注意事项)

数组标注

   优先考虑用该方式为组件定义依赖,例如:

someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
  // ...
}]);

在代码中通过在第二个数组类型的参数中声明了'$scope','greeter'等依赖,数组最后一个元素为实际的构造方法,注意在构造方法的参数列表与其面的数组元素是一一对应的。

$inject属性

我们还可以通过为控制器的构造方法添加$inject属性,并在该属性中添加依赖的方式定义依赖。

var MyController = function($scope, greeter) {
  // ...
}
MyController.$inject = ['$scope', 'greeter'];
someModule.controller('MyController', MyController);

注意$inject中依赖的顺序与构造方法中的参数需保持一致。

隐式声明依赖

最简单的声明依赖的方式就是让设构造方法的参数与依赖的名字一样。

someModule.controller('MyController', function($scope, greeter) {
  // ...
});

注入器可以从函数的参数名中推断所依赖的服务。上面的函数中声明了$scope和greeter服务作为依赖。 这种方式可是代码更加简洁,但这种方式不能和Javascript的代码混淆器一起使用。可以通过ng-annotate在minifying之前隐式的添加依赖。

参考:http://www.tuicool.com/articles/uEB3Mj