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'];

 

posted on 2017-07-23 10:39  流年染指了悲伤  阅读(239)  评论(0编辑  收藏  举报