您的位置：首页 > Web前端 > AngularJS

angularJS依赖注入

2017-07-23 10:39 316 查看
AngularJS的依赖注入有两种，一种是显式依赖注入，一种是隐式依赖注入，推荐用显式依赖注入，js压缩后不会因为参数问题而报错

demo6.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
{{data}}
</div>
<div ng-controller="otherController">
{{otherData}}
</div>
</div>
<script type="text/javascript" src="../common/angular/angularjs.js"></script>
<script type="text/javascript" src="demo6.js"></script>
</body>
</html>


demo6.js

/**
* Created by Administrator on 2017/7/23.
*/
var myApp = angular.module('myApp', [], function () {

})

//显式依赖注入 myFactory 工厂
.factory('myFactory', ['$window', function (a) {
console.log("window:" + a);
return "myFactory";
}])

/**
* 1.隐式依赖注入，直接写 function ($scope) 而且参数名称必须是$scope，$scope这个单词不能改
*/
.controller('myController', function ($scope) {
$scope.data = '张三';
})

/**
* 2.显式依赖注入 第二个参数用数组 [] 的方式表示，$scope 就是后面functioin的参数a，$filter 就是参数b，多个参数以此类推
* 推荐使用显示依赖注入，一般function(a,b,c)里面的参数名，最好与数组[]前面的变量名一致，方便阅读
*/
.controller('myController', ['$scope', '$filter', 'myFactory', function (a, b, c) {
a.data = '张三';
console.log(a);
console.log(b('json')([1, 2, 3]));
console.log(c);
}])

/**
* 定义了一个全局的函数 otherController ，可以通过otherController.$inject 的方式 显式依赖注入 $scope ，
* 这里的 a 就是指 $scope
* @param a
*/
function otherController(a) {
a.otherData = '李四';
}
otherController.$inject = ['$scope'];
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航