根據環境（開發，登台，生產）進行角度配置

Question

我知道這很愚蠢-每次更改環境時，我都會注釋掉並返回我的應用程序的配置工廠。 一定有更好的方法嗎？

我雖然檢查了URL，但這似乎是一種不好的做法。 我想到的另一個選擇是在構建過程中使用某種類型的NPM-但是開發沒有構建過程。

angular.module('myApp.services')
    .factory('GemsConfig', function () {
        return {
            //apiServer: "http://localhost:3000/v2/",
            //apiServer: "https://staging.gems.org/v2/",
            apiServer: "https://api.gems.org/v2/",
            //giphyServer: "http://api.giphy.com/v1/gifs/",
            giphyServer: "https://api.giphy.com/v1/gifs/",
            TTL: 5000,
            OS: 'web',
            version: '1.1',
            apiVer: '2.0',
            checkBalanceEveryXSeconds: 600,
            //giphyKey: 'xxx',    // testing
            giphyKey: 'xxxx'
        };

    })

Answer 1

創建兩個配置，一個用於生產，一個用於開發。 並創建一個變量，該變量可以具有“生產”或“發展”兩個值。 基於此變量調用您的配置。 這樣，您只需要更改變量的名稱即可。

例如。

angular.module('myApp.services')
    .factory('GemsConfig', function () {

        var currentEnv = "production";
        var config  = {

          development :{
            apiServer: "https://api.gems.org/v2/",
            giphyServer: "https://api.giphy.com/v1/gifs/",
            TTL: 5000,
            OS: 'web',
            version: '1.1',
            apiVer: '2.0',
            checkBalanceEveryXSeconds: 600,
            giphyKey: 'xxxx'
        },
          production :{
            apiServer: "https://api.gems.org/v2/",
            giphyServer: "https://api.giphy.com/v1/gifs/",
            TTL: 5000,
            OS: 'web',
            version: '1.1',
            apiVer: '2.0',
            checkBalanceEveryXSeconds: 600,
            giphyKey: 'xxxx'
        }
        };

        return config[currentEnv];

     })

編輯

或更佳的解決方案：創建三個配置1）通用2）生產3）開發

您可以將通用配置參數保留在“通用”通用配置中，也可以在“生產”或“開發”中覆蓋它們。 並且至少您必須合並 “當前環境”-（生產或開發）配置和“通用”配置。 為此，您可以使用angular.extend函數。

例如。

 angular.module('myApp.services')
        .factory('GemsConfig', function () {

           var currentEnv = "production";
            var config  = {

                common:{
                  TTL: 5000,
                  OS: 'web',
                  version: '1.1',
                  apiVer: '2.0',
                  checkBalanceEveryXSeconds: 600,
                  giphyKey: 'xxxxx'
                },
               development :{
                  apiServer: "https://api.gems.org/v2/",
                  giphyServer: "https://api.giphy.com/v1/gifs/",
                },

                production :{

                  apiServer: "https://api.gems.org/v2/",
                  giphyServer: "https://api.giphy.com/v1/gifs/",
                  TTL:800,

                }
            };

            return angular.extend(config['common'],config[currentEnv]);
});