如何在AngularJS中管理環境變量

在 AngularJS 中，管理環境變量的一種常見方法是使用環境文件

1. 在項目根目錄下創建環境文件。為不同的環境創建單獨的文件，例如 environment.js（適用于所有環境）、environment.prod.js（適用于生產環境）和 environment.dev.js（適用于開發環境）。

2. 在這些文件中，定義一個名為 $ENV 的對象，其中包含不同環境的變量。例如：

// environment.js
angular.module('myApp').constant('ENV', {
  production: false,
  apiUrl: 'https://api.example.com/'
});

// environment.prod.js
angular.module('myApp').constant('ENV', {
  production: true,
  apiUrl: 'https://api.example.com/'
});

// environment.dev.js
angular.module('myApp').constant('ENV', {
  production: false,
  apiUrl: 'https://api.example.com/dev/'
});

3. 在 .angular-cli.json 文件中，將這些環境文件添加到 scripts 數組中。這樣，Angular CLI 會在構建項目時將它們包含在生成的 index.html 文件中。

"scripts": [
  "src/assets/js/environment.js",
  "src/assets/js/environment.prod.js",
  "src/assets/js/environment.dev.js"
],

4. 在應用程序的配置中，使用 ENV 常量來設置應用程序的設置。例如：

angular.module('myApp')
  .config(['$httpProvider', 'ENV', function($httpProvider, ENV) {
    if (ENV.production) {
      $httpProvider.defaults.headers.common['Authorization'] = 'Bearer YOUR_PROD_API_KEY';
    } else {
      $httpProvider.defaults.headers.common['Authorization'] = 'Bearer YOUR_DEV_API_KEY';
    }
  }]);

5. 在運行應用程序時，通過設置 --configuration=production（生產環境）或 --configuration=development（開發環境）標志來選擇要使用的環境。例如，使用 Angular CLI 時：

ng serve --configuration=development

或

ng build --prod

這樣，AngularJS 應用程序就可以根據所選環境加載相應的環境變量。