angularjs中控制檢視的控制器的兩種注入依賴項及服務的寫法

网风笔记开发者發表於2024-09-28

在AngularJS中,控制器是用於控制檢視行為的重要元件。當定義控制器時,有兩種主要的方式注入依賴項:

1. 顯式依賴注入,即使用字串陣列形式來注入依賴項:

myapp.controller('myCtrl', ['$scope', function($scope) {
$scope.navs = [];
}]);

  在這種方式中,依賴項(這裡是`$scope`)是以字串的形式明確列出的。這種方法被稱為“顯式依賴注入”,它使得依賴關係更加明顯,並且有助於測試,因為可以更容易地為依賴項提供mock物件。這是AngularJS官方推薦的做法,因為它能夠避免由於作用域鏈導致的問題,並且有助於提高程式碼的可維護性。這種寫法中function($scope)的引數名$scope可以在函式內部更改而不影響程式碼的執行,因為AngularJS會根據字串陣列中的名字來查詢對應的依賴項。例如,您可以將函式引數改為任何其他名稱,如下所示:

myapp.controller('myCtrl', ['$scope', function(myCustomScopeName) {
    myCustomScopeName.navs = [];
}]);

  

只要第一個陣列元素'$scope'保持不變,AngularJS就能正確地將$scope例項注入到名為myCustomScopeName的引數中。

2. 隱匿依賴注入,即直接傳遞依賴項名稱的形式:

myapp.controller('myCtrl', function($scope) {
$scope.navs = [];
});

  這種方式中,依賴項(如`$scope`)直接作為引數傳遞給建構函式。雖然這種方式簡潔,但它依賴於解析器能夠正確解析出函式引數名並將其與服務名稱匹配。這在開發階段可能會導致一些問題,尤其是在某些JavaScript最佳化工具(如閉包編譯器)壓縮程式碼時,可能會改變變數名,從而導致注入失敗。這種寫法中,function($scope)的$scope這個函式引數就不能更改名稱了。否則AngularJS將無法識別並注入正確的服務,從而導致錯誤。

總的來說,第一種方法(顯式依賴注入)更安全,更易於除錯和測試,而第二種方法雖然簡單,但在大型專案中可能會帶來一些問題。因此,建議使用第一種方法來定義你的控制器。

相關文章