angularJS依赖注入
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'];