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

謝謝兩位了！受教 了