一、依賴注入：AngularJS的核心設計理念

在AngularJS框架中，依賴注入（Dependency Injection）是實現(xiàn)模塊化開發(fā)和代碼解耦的關鍵機制。它允許開發(fā)者將服務、組件或值以聲明方式注入到函數(shù)中，無需手動創(chuàng)建依賴對象。這種設計模式顯著提升了代碼的可維護性、可測試性和復用性，是構建大型企業(yè)級應用的基石。

通過依賴注入，AngularJS實現(xiàn)了：

• 解耦組件關系：組件不直接創(chuàng)建依賴，降低代碼耦合度
• 增強可測試性：輕松替換模擬依賴進行單元測試
• 提升代碼復用：服務可在多個控制器間共享
• 動態(tài)加載機制：按需加載依賴模塊優(yōu)化性能

二、AngularJS依賴注入的三種實現(xiàn)方式

<script>
angular.module('myApp', [])
  .controller('UserController', function($scope, UserService) {
    // $scope和UserService會被自動注入
    UserService.getUsers().then(function(users) {
      $scope.users = users;
    });
  })
  .service('UserService', function($http) {
    this.getUsers = function() {
      return $http.get('/api/users');
    };
  });
</script>

<script>
function OrderController($scope, InventoryService) {
  // 控制器邏輯
}

OrderController.$inject = ['$scope', 'InventoryService'];
angular.module('myApp').controller('OrderController', OrderController);
</script>

<script>
angular.module('myApp')
  .controller('ProductController', ['$scope', 'ProductAPI', 
  function($scope, productApi) {
    // 參數(shù)productApi對應ProductAPI服務
    productApi.fetchProducts().then(...);
  }]);
</script>

三、依賴注入在阿里云環(huán)境中的最佳實踐

當AngularJS應用部署在阿里云國際站時，可結合云原生能力實現(xiàn)質(zhì)的飛躍：

// 注入阿里云OSS服務實現(xiàn)文件上傳
.controller('UploadController', ['$scope', 'AliyunOSS', 
function($scope, OSS) {
  $scope.uploadFile = function(file) {
    OSS.putObject('my-bucket', file.name, file)
      .then(function(response) {
        console.log('Upload success:', response);
      });
  };
}]);

四、企業(yè)級應用開發(fā)完整示例

<div ng-app="cloudApp" ng-controller="MainController">
  <h3>阿里云產(chǎn)品列表</h3>
  <ul>
    <li ng-repeat="product in cloudProducts">
      {{ product.name }} - {{ product.desc }}
    </li>
  </ul>
</div>

<script>
// 聲明模塊及依賴
angular.module('cloudApp', [])
  // 配置階段注入$httpProvider
  .config(['$httpProvider', function(httpProvider) {
    httpProvider.defaults.headers.common['X-Cloud-Source'] = 'Aliyun';
  }])
  
  // 創(chuàng)建訪問阿里云API的服務
  .service('CloudAPIService', ['$http', function(http) {
    this.getProducts = function() {
      return http.get('https://api.aliyun.com/products')
        .then(response => response.data);
    };
  }])
  
  // 控制器注入自定義服務
  .controller('MainController', ['$scope', 'CloudAPIService', 
  function(scope, apiService) {
    scope.cloudProducts = [];
    
    apiService.getProducts().then(function(products) {
      scope.cloudProducts = products;
    });
  }]);
</script>