angular.js - angularjs 依赖注入的写法问题

Question

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

Answer 1

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

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

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){

}

Answer 2

直接引用一篇文章的答案给你好了
原文地址
依赖注入是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)}])

Answer 3

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

Answer 4

谢谢两位了！受教 了