一、依賴注入：AngularJS的核心設(shè)計(jì)理念

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

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

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

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

<script>
angular.module('myApp', [])
  .controller('UserController', function($scope, UserService) {
    // $scope和UserService會(huì)被自動(dòng)注入
    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對(duì)應(yīng)ProductAPI服務(wù)
    productApi.fetchProducts().then(...);
  }]);
</script>

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

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

// 注入阿里云OSS服務(wù)實(shí)現(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è)級(jí)應(yīng)用開發(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的服務(wù)
  .service('CloudAPIService', ['$http', function(http) {
    this.getProducts = function() {
      return http.get('https://api.aliyun.com/products')
        .then(response => response.data);
    };
  }])
  
  // 控制器注入自定義服務(wù)
  .controller('MainController', ['$scope', 'CloudAPIService', 
  function(scope, apiService) {
    scope.cloudProducts = [];
    
    apiService.getProducts().then(function(products) {
      scope.cloudProducts = products;
    });
  }]);
</script>