首页 > angularjs 依赖注入的写法问题

angularjs 依赖注入的写法问题

书中关于注入写法有两种
app.controller('PhoneListCtrl', ['$scope', '$http', function($scope,$http)];
app.controller('PhoneListCtrl', function($scope,$http)];
不懂这两种有什么区别呢!!??请教了


谢谢两位了!受教 了


前一种是显示的注入,后一种是自动注入。没区别。
不过大家最推荐的是inject函数注入。另外你第一中写法,注意显示注入后,顺序要跟函数参数顺序对应住。


首先格式化一下你的代码:

显示注入,代码过长,不容易阅读,代码压缩不出错

app.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http){
     //do something
}]);

隐示注入,书写简单,但是在js进行压缩时候会出错,因为变量名变短,而依赖注入是基于其服务的名称的

app.controller('PhoneListCtrl', function($scope, $http){
     //do something
});

大家推荐$inject的方式,你可以参考JohnPapa的 Angular Style Guide

app.controller('PhoneListCtrl', PhoneListCtrl);

PhoneListCtrl.$inject = ['$scope', '$http'];

function PhoneListCtrl($scope, $http){

}

另外多说一句,无论你采用那一种,在代码压缩时,其实是不用担心的,因为有插件会帮我们进行依赖注入,无论你使用的是gulp还是grunt,会有一个插件 ng-annotate 帮助你进行依赖注入的添加。

举个例子

app.controller('PhoneListCtrl', PhoneListCtrl);

/* @ngInject */
function PhoneListCtrl($scope, $http){

}

直接引用一篇文章的答案给你好了
原文地址
依赖注入是AngularJS最棒的模式之一。它使测试变得更加方便,也让它所依赖的对象变的更加清楚明白。AngularJS 对于注入是非常灵活的。一个最简单的方式只需要为模块将依赖的名字传入函数中:

var app = angular.module('app',[]);app.controller('MainCtrl', function($scope, $timeout){
    $timeout(function(){
        console.log($scope);
    }, 1000);});

这里,很清楚的是MainCtrl依赖于$scope和$timeout。
直到你准备投入生产并压缩你的代码。使用UglifyJS,上面的例子会变成:

var app=angular.module("app",[]);
app.controller("MainCtrl",function(e,t){t(function(){console.log(e)},1e3)})

现在AngularJS怎么知道MainCtrl依赖什么?AngularJS提供了一个非常简单的解决方案:把依赖作为一个字符串数组传递,而数组的最后一个元素是一个把所有依赖作为参数的函数。

app.controller('MainCtrl', ['$scope', '$timeout', function($scope, $timeout){
    $timeout(function(){
        console.log($scope);
    }, 1000);}]);

接下来在压缩的代码中AngularJS也可以知道如何找到依赖:

app.controller("MainCtrl",["$scope","$timeout",function(e,t){t(function(){console.log(e)},1e3)}])
【热门文章】
【热门文章】