如何在AngularJS中處理多環境配置

在 AngularJS 中，我們可以使用不同的配置文件來處理多環境配置

1. 在項目根目錄下創建一個名為 config 的文件夾。在該文件夾中，為每個環境創建一個單獨的配置文件。例如：config.dev.js、config.prod.js 等。

2. 在這些配置文件中，定義一個名為 $stateProvider 和 $urlRouterProvider 的對象。這些對象將用于配置應用程序的路由。同時，您還可以在這些文件中注入其他服務，如 $httpProvider 等。

3. 在每個環境配置文件中，根據當前環境設置相應的配置值。例如，您可以設置 API 服務器的 URL 或應用程序的其他配置參數。

4. 在 app.js 文件中，首先加載 angular-ui-router 模塊（如果尚未加載），然后使用 angular.module() 創建應用程序。

5. 使用 $locationProvider 服務將應用程序的路由模式設置為 hash。這樣可以在刷新頁面時保留路由狀態。

6. 使用 config 服務將各個環境的配置文件注入到應用程序中。您可以通過將環境名稱作為參數傳遞給 config 服務來實現這一點。例如：

angular.module('myApp', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', 'config', function($stateProvider, $urlRouterProvider, config) {
    if (config.env === 'dev') {
      // 加載開發環境配置
      angular.extend(app.config, config.dev);
    } else if (config.env === 'prod') {
      // 加載生產環境配置
      angular.extend(app.config, config.prod);
    }

    // 其他配置...
  }]);

7. 在運行應用程序之前，設置環境變量以指示當前環境。例如，您可以在命令行中使用以下代碼：

export APP_ENV=dev

或者在 HTML 文件中通過 <meta> 標簽設置：

<meta name="app-env" content="dev">

8. 在 app.js 文件中，根據環境變量加載相應的配置文件。例如：

angular.module('myApp', ['ui.router'])
  .run(['$rootScope', 'config', function($rootScope, config) {
    $rootScope.$watch(function() {
      return config.env;
    }, function(newEnv, oldEnv) {
      if (newEnv !== oldEnv) {
        // 重新加載配置文件
        angular.extend(app.config, config[newEnv]);
      }
    });
  }]);

現在，您可以根據當前環境加載不同的配置文件，從而實現多環境配置。