javascript代码实例教程-AngularJS的依赖注入方式

发布时间:2019-01-29 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-AngularJS的依赖注入方式脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 在定义controller,module,service,and directive时有两种方式,

 

方式一:

 

VAR myModule = Angular.module('myApp', []);

    myModule.controller('myCtrl', ['$scoPE', 'PRoject', function($scope, Project) {

 

    }]);

方式二:

 

var myModule = angular.module('myApp', []);

    function myCtrl($scope, Project) {

 

    }

myModule.controller('myCtrl', myCtrl);

这两种方式在本质上并没有什么区别,不过方式二会造成作用域的污染。

 

也许你还会意识到以上两种定义方式里的依赖注入的方式也有一些不一样,下面简单总结一下:

 

1.简单注入方式(Simple injection method)

 

function myCtrl($scope,Project){};

myModule.controller('myCtrl', myCtrl);

//或者

myModule.controller(function($scope,Project){

        

})

AngularJs会扫描function的参数,提取参数的名称(name)作为function的依赖,

 

所以这种方式要求保证参数名称的正确性,但对参数的顺序并没有要求;

 

但是这种注入方式有一个问题,当我们将项目发布到正式环境时都会压缩我们的代码,这时function的参数可能会变成a,b,这就会导致我们的代码出现问题,下面两种注入方式可以帮我们解决这个问题。

 

2.数组注释法(array-style notation)

 

myModule.controller('myCtrl', ['$scope', 'Preject', function($scope, Project) {

        

}])

每一个依赖的参数值(字符串)都会以相同的顺序存放在一个数组里,数组的值与后面的function参数一一对应,这样即使压缩了也不会有什么问题。

 

如果你不喜欢这种数组注释的定义方式,下面还有一种方式。

 

3.显示调用function的$inject

 

AngularJs提供了一种向injector server通知你想要注入的依赖的方式

 

function myCtrl(a, b) {

    //$scope, Project,故意改成a,b模拟压缩后的情形

}

myCtrl.$inject = ['$scope', 'Project'];

myModule.controller('PhoneDetailCtrl', myCtrl);

如上,通过设置funcITon的$inject属性,可以达到依赖注入的效果;

 

最后,有一个第三方的插件ng-min,它可以帮你将以简单方式注入的代码自动转换成数组注释的方式,即能满足你写简洁代码的愿望,又能避免压缩出错问题。

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-AngularJS的依赖注入方式全部内容,希望文章能够帮你解决javascript代码实例教程-AngularJS的依赖注入方式所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。