angularjs怎么查看注入了什么依赖

 我来答
龙氏风采
2017-11-18 · 知道合伙人互联网行家
龙氏风采
知道合伙人互联网行家
采纳数:5849 获赞数:12817
从事互联网运营推广,5年以上互联网运营推广经验,丰富的实战经

向TA提问 私信TA
展开全部

依赖注入

依赖注入是软件设计模式中的一部分,用于处理组件是如何得到它说依赖的其它组件的。

Angular的注入器子系统(Angular是由多个系统组成)是负责创建组件,解决它们之间的依赖关系,并且根据它们的需要,给它们提供所需要的组件的实例。

使用依赖注入

依赖注入(DI)是贯通了整个angularjs的。当这个组件定义了,或者在module的run 方法config 方法中定义了它们,你就可以在这个module的任何地方使用这个组件了。

1、诸如:服务(service)、指令(directive)、过滤器(filter)和动画(animation)组件,都是通过注入器的工厂(factory)方法或者在构造函数中定义的。这些组件可以注入service"(服务) 或者 "value"(值)。

2、控制器(controller)就是使用构造函数的方式进行定义的。它可以注入service"(服务) 或者 "value"(值)。

3、run 方法接收一个function函数,它里面可以注入服务(service)或者值(value)亦或常量(constant),然后可以被注入到需要它们的组件当中去(注意,这里可以定义一些常量哦!)。提示:在run 中,你不能注入“provider”哦!

4、config 方法接收一个function函数,它可以注入"provider" and "constant"(常量)。提示:在config 方法中,你不可以注入"service"(服务) 或者 "value"(值)。

关于模块Modules 的run 方法和 config 方法的更多信息,请点击这里。

工厂(factory)方法

使用factory来定义指令(directive),服务(service)或者过滤器(filter)。factory方法是注册在module(模块)下的。我们推荐你这样来定义factory:

12345678910

angular.module('myModule', []).factory('serviceId', ['depService', function(depService) {  // ...}]).directive('directiveName', ['depService', function(depService) {  // ...}]).filter('filterName', ['depService', function(depService) {  // ...}]);

模块儿(module)的方法

我们可以指定方法在configuration(配置环境)下运行,也可以在module(模块)的运行时,通过调用config 方法和 run 方法来运行。

1234567

angular.module('myModule', []).config(['depProvider', function(depProvider) {  // ...}]).run(['depService', function(depService) {  // ...}]);

控制器

我们推荐如下的方式来注册一个Controller:

1234567

someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {  ...  $scope.aMethod = function() {    ...  }  ...}]);

不像服务一样,在应用程序中,相同的controller是可以有多个实例的哈。

依赖性的声明

在Angular中,调用一些方法都是使用注入的方式进行调用的,例如:service factory,controller。那么你就必须将它们所使用的组件给注入进去,以提供它们使用。有以下三种方式进行依赖关系的声明。

1、使用内联数组的声明方式

2、使用$inject 属性来声明

3、隐式声明方式(不推荐,并且会有警告)

一、内联数组的声明方式

这是非常好的一种声明依赖性的方式。来一个例子:

123

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

我们使用一个数组,这个数组由两部分元素组成,一个用于声明依赖性的字符串集合和最后一个元素(这个元素是一个方法,用于自己的实现)。

二、$inject 属性进行声明

直接上个例子:

12345

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

需要注意的是,$inject 数组中的依赖,必须与MyController控制器中的参数一 一对应。

三、隐式声明

注意:如果你打算使用这种方式去运行代码,你的服务的名称可能会被重命名,服务也可能会在你的应用中被玩坏。

这是最简单的一种声明方式,你只要保证你的参数名称和依赖的组件名称能对得上。

123

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

在上面的例子当中,$scope 服务和 greeter 服务会被注入到controller里面去。这种方式的一个好处就是少了依赖性声明的数组的存在。而且可以很自由的重新排列你的依赖性。

但是,这个方法在混淆和压缩后是没有发用的。是无法正常工作的。因为这些动作都会重命名你的参数。呃呃呃……

ng-annotate 工具可以方便的让你在你的应用中使用这个隐式声明模式,因为它会在进行压缩或者混淆的时候自动把你的声明方式给改成我们推荐的内联方式进行声明,如果你想使用这种方式,可能你需要使用ng-strict-di(严格模式)。

正因为这种方式要使用严格模式,我们需要很小心,所以,一般我们都不会使用这种方式。

使用严格的依赖注入

你可以把ng-strict-di 指令增加到ng-app 指令所在的元素上,来使得你的应用使用的是严格模式。

1234567

<!doctype html><html ng-app="myApp" ng-strict-di><body>  I can add: {{ 1 + 2 }}.  <script src="angular.js"></script></body></html>

严格模式下,如果你尝试使用隐式方式来声明的时候,就会抛异常。

1234567

angular.module('myApp', []).factory('willBreak', function($rootScope) {  // $rootScope is implicitly injected}).run(['willBreak', function(willBreak) {  // Angular will throw when this runs(执行到这里会报错)}]);

如果你是使用手动方式启动应用的话,你也可以这样来使用严格模式:

123

angular.bootstrap(document, ['myApp'], {  strictDi: true});

已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式