Angular模塊依賴項注入未按預期工作

Question

所以我在管理節點應用程序的依賴項時遇到麻煩。 結構如下

app.js

var app = angular.module('myApp', ['myController', 'myFactory', 'rzModule', 'chart.js', 'myService', 'selector']);

myController.js

var app = angular.module('myApp', ['chart.js', 'rzModule', 'selector']);
app.controller('myController', function($scope, $http, $rootScope, myFactory, mySecondService){ ... }]);

myFactory.js

angular.module('myApp').factory('myFactory', function($http, $rootScope){ ... });

myService.js

angular.module('myApp').service('myService', function($http){...});

以上結構可以正常運行，該應用程序將按預期運行。 但是我不認為我在myController.js中所做的事情是正確的，因為我現在想添加另一個依賴項，並且在不使應用程序崩潰的情況下我不知道該怎么做。

問題1：在myController.js上方，我想我是在創建一個新模塊，而不是重用app.js中的模塊，對嗎？ 如果是這樣，則像下面的結果一樣，將3個依賴項內聯移動到“ myController不可用”中：

var app = angular.module('myApp');
app.controller('myController',['chart.js', 'rzModule', 'selector', function(...)

為什么這不起作用？ 根據文檔，它應該。

問題2：我想向myController添加角矩 。 說明說我應該將'angularMoment'作為依賴添加到app.js，然后將'moment'到控制器依賴。 如果這樣做，並像問題1一樣添加'moment'內聯，我將再次收到“ myController不可用”錯誤。

Answer 1

因此，在繼續使用angularjs回答問題之前，需要先將模塊注入應用程序而不是控制器中，因此要包含的任何模塊都需要注入應用程序中。

var app = angular.module('myApp', [<all modules comma separated>]);

類似地，控制器可以具有鏈接到myApp所有那些依賴項（例如服務，工廠等）以及在注入到myApp模塊中定義的那些服務。

您不能注入控制器，只能在myApp中注入服務

問題1

var app = angular.module('myApp', ['chart.js', 'rzModule', 'selector']);
app.controller('myController', function(...)

這項工作並使用它並不意味着您正在創建任何新應用

問題2

var app = angular.module('myApp', ['angularMoment']);
app.controller('myController', ['moment', function(...)

這樣，您可以使用矩對象。

Answer 2

正如薩帕爾所說

app.controller('myController',['chart.js', 'rzMo

是要走的路，還是寫這個的更干凈的方法是做這樣的事情。

angular.module('myApp').controller('myController');

myController.$inject = ['$scope', '$http', '$rootScope', 'myFactory', 'mySecondService']

function myController($scope, $http, $rootScope, myFactory, mySecondService){}

myController無法使用這些修復程序的原因是，現在您沒有覆蓋主應用程序模塊，而是在尋找找不到的名為myController的模塊（因為它是控制器而不是模塊）。 所以刪除'myController'從var app = angular.module('myApp', ['myController'

我建議您看一下John Papa的AngularJS樣式指南，這對於編寫簡潔的代碼會有所幫助。

Answer 3

回答1：是。在第二種情況下，您嘗試再次定義它。 定義應用程序用途：

angular.module('myApp', [..list of dependancies...]);

現在，如果您想在以前的模塊上使用定義控制器

angular.module('myApp').controller();

現在開始注入您的3個依賴關系，將它們移到定義應用程序的頂部。

答案2：您將不得不向應用程序中注入angularMoment，並向控制器中注入力矩。

處理角度依賴注入的最好方法是使用$ inject。 例如，您的控制器看起來像

angular.module('myApp').controller('myController', myController);

myController.$inject = ['moment','$scope', '$http', '$rootScope', 'myFactory', 'mySecondService']
function myController(moment, $scope, $http, $rootScope, myFactory, mySecondService){
    //your controller code.
}

否則您也可以嘗試以下方法

angular.module('myApp').controller('myController',['moment','$scope', '$http', '$rootScope', 'myFactory', 'mySecondService', function myController(moment, $scope, $http, $rootScope, myFactory, mySecondService){
    //your controller code.
}]);

以下內容也可以使用，但不建議使用；

angular.module('myApp').controller('myController',function myController(moment, $scope, $http, $rootScope, myFactory, mySecondService){
        //your controller code.
    });