Day 56/100 AngularJS 依賴注入详情 - javascript,前端,angularjs SnowWolfArden 日志

动态

详情

返回

Day 56/100 AngularJS 依賴注入 - 动态详情

11:03 上午 · 11月 03 ,2025

（一）需求

被問到AngularJS依賴注入的原理時，發現自己掌握的不好，於是總結記錄下。

（二）依賴注入介紹

1、為什麼要有依賴注入？

減少代碼之間的耦合度，使代碼有很強的可擴展性。

模板功能強大豐富，並且是聲明式的，自帶了豐富的Angular指令；

是一個比較完善的前端MVC框架，包含模板，數據雙向綁定，路由，模塊化，服務，過濾器，依賴注入等所有功能；

依賴注入簡化了組件之間處理依賴的過程（即解決依賴）。沒有依賴注入，就不得不以某種方式自己查找$scope，很可能得使用全局變量。這雖然能夠工作，但是不如AngularJS的依賴注入技術這麼簡單。

在開發中使用依賴注入的主要好處是AngularJS負責管理組件並在需要的時候提供給相應函數。依賴注入還能夠為測試帶來好處，因為它允許你使用假的或者模擬的對象來代替真實的組件，從而讓開發者專注於程序的特定部分。

2、定義

依賴注入（Dependency Injection，簡稱DI）是一種軟件設計模式，在這種模式下，一個或更多的依賴（或服務）被注入（或者通過引用傳遞）到一個獨立的對象（或客户端）中，然後成為了該客户端狀態的一部分。

該模式分離了客户端依賴本身行為的創建，這使得程序設計變得鬆耦合，並遵循了依賴反轉和單一職責原則。與服務定位器模式形成直接對比的是，它允許客户端了解客户端如何使用該系統找到依賴

3、依賴註解如何使用？

什麼時候使用？

在開發中就可以用的，尤其是有很多模塊的頁面中，為了實現mvc的思想，把各個部分抽離出來，單獨寫成一個angularjs依賴的組件，在使用的時候直接拿來用，當你的項目需要交接或者修改的時候，直接修改組件的內容就可以

依賴註解使用有三種方式

(1)數組標註

someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {

}]);

(2)添加$inject屬性

var MyController = function($scope, greeter) {

}

MyController.$inject = ['$scope', 'greeter'];

someModule.controller('MyController', MyController);

(3)隱式聲明

someModule.controller('MyController', function($scope, greeter) {

});

使用場景

控制器中使用DI

 someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
    ...
    $scope.aMethod = function() {
      ...
    }
    ...
  }]);

工廠方法中使用DI

  angular.module('myModule', []).
    config(['depProvider', function(depProvider){
      ...
    }]).
    factory('serviceId', ['depService', function(depService) {
      ...
    }]).
    directive('directiveName', ['depService', function(depService) {
      ...
    }]).
    filter('filterName', ['depService', function(depService) {
      ...
    }]).
    run(['depService', function(depService) {
      ...
    }]);