如何在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 应用程序就可以根据所选环境加载相应的环境变量。