如何在AngularJS中管理環(huán)境變量

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

1. 在項目根目錄下創(chuàng)建環(huán)境文件。為不同的環(huán)境創(chuàng)建單獨的文件，例如 environment.js（適用于所有環(huán)境）、environment.prod.js（適用于生產(chǎn)環(huán)境）和 environment.dev.js（適用于開發(fā)環(huán)境）。

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

// 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 文件中，將這些環(huán)境文件添加到 scripts 數(shù)組中。這樣，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（生產(chǎn)環(huán)境）或 --configuration=development（開發(fā)環(huán)境）標志來選擇要使用的環(huán)境。例如，使用 Angular CLI 時：

ng serve --configuration=development

或

ng build --prod

這樣，AngularJS 應用程序就可以根據(jù)所選環(huán)境加載相應的環(huán)境變量。