码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS依赖注入

时间:2017-07-23 12:44:24      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:mod   rip   变量   com   function   隐式   type   方便   mon   

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

 

AngularJS依赖注入

标签:mod   rip   变量   com   function   隐式   type   方便   mon   

原文地址:http://www.cnblogs.com/skyessay/p/7223917.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!