angularjs的三种注入方式

前端之家收集整理的这篇文章主要介绍了angularjs的三种注入方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

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

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

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

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

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

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

1、数组标注(内联式注入)

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

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

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

2、$inject属性(声明式或标注式注入)

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

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

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

3、隐式声明依赖(推断性注入)

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

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

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

猜你在找的Angularjs相关文章