221

您如何管理不同环境的配置变量/常量?

这可能是一个例子:

我的 REST API 可以在 上访问localhost:7080/myapi/,但是我的朋友在 Git 版本控制下处理相同的代码,他的 Tomcat 上部署了 API localhost:8099/hisapi/

假设我们有这样的东西:

angular
    .module('app', ['ngResource'])

    .constant('API_END_POINT','<local_end_point>')

    .factory('User', function($resource, API_END_POINT) {
        return $resource(API_END_POINT + 'user');
    });

如何根据环境动态注入 API 端点的正确值?

在 PHP 中,我通常用一个文件来做这种事情config.username.xml,将基本配置文件(config.xml)与用户名识别的本地环境配置文件合并。但是我不知道如何在 JavaScript 中管理这种事情?

4

10 回答 10

209

我有点晚了,但如果你使用Grunt,我已经取得了巨大的成功grunt-ng-constant

ngconstant我的配置部分Gruntfile.js看起来像

ngconstant: {
  options: {
    name: 'config',
    wrap: '"use strict";\n\n{%= __ngModule %}',
    space: '  '
  },
  development: {
    options: {
      dest: '<%= yeoman.app %>/scripts/config.js'
    },
    constants: {
      ENV: 'development'
    }
  },
  production: {
    options: {
      dest: '<%= yeoman.dist %>/scripts/config.js'
    },
    constants: {
      ENV: 'production'
    }
  }
}

使用的任务ngconstant看起来像

grunt.registerTask('server', function (target) {
  if (target === 'dist') {
    return grunt.task.run([
      'build',
      'open',
      'connect:dist:keepalive'
    ]);
  }

  grunt.task.run([
    'clean:server',
    'ngconstant:development',
    'concurrent:server',
    'connect:livereload',
    'open',
    'watch'
  ]);
});

grunt.registerTask('build', [
  'clean:dist',
  'ngconstant:production',
  'useminPrepare',
  'concurrent:dist',
  'concat',
  'copy',
  'cdnify',
  'ngmin',
  'cssmin',
  'uglify',
  'rev',
  'usemin'
]);

所以运行grunt server会生成一个config.js文件app/scripts/,看起来像

"use strict";
angular.module("config", []).constant("ENV", "development");

最后,我声明了对任何需要它的模块的依赖:

// the 'config' dependency is generated via grunt
var app = angular.module('myApp', [ 'config' ]);

现在我的常量可以在需要的地方注入依赖项。例如,

app.controller('MyController', ['ENV', function( ENV ) {
  if( ENV === 'production' ) {
    ...
  }
}]);
于 2013-08-20T19:17:04.943 回答
75

一个很酷的解决方案可能是将所有特定于环境的值分成一些单独的角度模块,所有其他模块都依赖于:

angular.module('configuration', [])
       .constant('API_END_POINT','123456')
       .constant('HOST','localhost');

然后,需要这些条目的模块可以声明对它的依赖:

angular.module('services',['configuration'])
       .factory('User',['$resource','API_END_POINT'],function($resource,API_END_POINT){
           return $resource(API_END_POINT + 'user');
       });

现在你可以考虑更酷的东西:

包含配置的模块可以分离到 configuration.js,它将包含在您的页面中。

这个脚本可以很容易地被你们每个人编辑,只要你不把这个单独的文件签入 git。但如果配置在单独的文件中,则不检查配置会更容易。此外,您可以在本地分支它。

现在,如果您有一个构建系统,例如 ANT 或 Maven,您的进一步步骤可能是为值 API_END_POINT 实现一些占位符,这些占位符将在构建时替换为您的特定值。

或者你有你的configuration_a.jsandconfiguration_b.js并在后端决定要包含哪些。

于 2013-05-02T14:16:06.213 回答
31

对于Gulp用户,gulp-ng-constant与 gulp -concatevent-streamyargs结合使用也很有用。

var concat = require('gulp-concat'),
    es = require('event-stream'),
    gulp = require('gulp'),
    ngConstant = require('gulp-ng-constant'),
    argv = require('yargs').argv;

var enviroment = argv.env || 'development';

gulp.task('config', function () {
  var config = gulp.src('config/' + enviroment + '.json')
    .pipe(ngConstant({name: 'app.config'}));
  var scripts = gulp.src('js/*');
  return es.merge(config, scripts)
    .pipe(concat('app.js'))
    .pipe(gulp.dest('app/dist'))
    .on('error', function() { });
});

在我的配置文件夹中,我有这些文件:

ls -l config
total 8
-rw-r--r--+ 1 .. ci.json
-rw-r--r--+ 1 .. development.json
-rw-r--r--+ 1 .. production.json

然后你可以运行gulp config --env development,这将创建如下内容:

angular.module("app.config", [])
.constant("foo", "bar")
.constant("ngConstant", true);

我也有这个规格:

beforeEach(module('app'));

it('loads the config', inject(function(config) {
  expect(config).toBeTruthy();
}));
于 2015-01-05T23:28:38.773 回答
17

为此,我建议您使用 AngularJS 环境插件:https ://www.npmjs.com/package/angular-environment

这是一个例子:

angular.module('yourApp', ['environment']).
config(function(envServiceProvider) {
    // set the domains and variables for each environment 
    envServiceProvider.config({
        domains: {
            development: ['localhost', 'dev.local'],
            production: ['acme.com', 'acme.net', 'acme.org']
            // anotherStage: ['domain1', 'domain2'], 
            // anotherStage: ['domain1', 'domain2'] 
        },
        vars: {
            development: {
                apiUrl: '//localhost/api',
                staticUrl: '//localhost/static'
                // antoherCustomVar: 'lorem', 
                // antoherCustomVar: 'ipsum' 
            },
            production: {
                apiUrl: '//api.acme.com/v2',
                staticUrl: '//static.acme.com'
                // antoherCustomVar: 'lorem', 
                // antoherCustomVar: 'ipsum' 
            }
            // anotherStage: { 
            //  customVar: 'lorem', 
            //  customVar: 'ipsum' 
            // } 
        }
    });

    // run the environment check, so the comprobation is made 
    // before controllers and services are built 
    envServiceProvider.check();
});

然后,您可以从控制器中调用变量,例如:

envService.read('apiUrl');

希望能帮助到你。

于 2015-07-26T05:13:27.570 回答
15

您可以使用lvh.me:9000来访问您的 AngularJS 应用程序(lvh.me仅指向 127.0.0.1),然后指定不同的端点(如果lvh.me是主机):

app.service("Configuration", function() {
  if (window.location.host.match(/lvh\.me/)) {
    return this.API = 'http://localhost\\:7080/myapi/';
  } else {
    return this.API = 'http://localhost\\:8099/hisapi/';
  }
});

然后注入配置服务并Configuration.API在需要访问 API 的任何地方使用:

$resource(Configuration.API + '/endpoint/:id', {
  id: '@id'
});

有点笨拙,但对我来说效果很好,尽管情况略有不同(API 端点在生产和开发中有所不同)。

于 2013-07-16T09:48:12.447 回答
7

我们也可以做这样的事情。

(function(){
    'use strict';

    angular.module('app').service('env', function env() {

        var _environments = {
            local: {
                host: 'localhost:3000',
                config: {
                    apiroot: 'http://localhost:3000'
                }
            },
            dev: {
                host: 'dev.com',
                config: {
                    apiroot: 'http://localhost:3000'
                }
            },
            test: {
                host: 'test.com',
                config: {
                    apiroot: 'http://localhost:3000'
                }
            },
            stage: {
                host: 'stage.com',
                config: {
                apiroot: 'staging'
                }
            },
            prod: {
                host: 'production.com',
                config: {
                    apiroot: 'production'
                }
            }
        },
        _environment;

        return {
            getEnvironment: function(){
                var host = window.location.host;
                if(_environment){
                    return _environment;
                }

                for(var environment in _environments){
                    if(typeof _environments[environment].host && _environments[environment].host == host){
                        _environment = environment;
                        return _environment;
                    }
                }

                return null;
            },
            get: function(property){
                return _environments[this.getEnvironment()].config[property];
            }
        }

    });

})();

在你的 中controller/service,我们可以注入依赖并调用 get 方法来访问要访问的属性。

(function() {
    'use strict';

    angular.module('app').service('apiService', apiService);

    apiService.$inject = ['configurations', '$q', '$http', 'env'];

    function apiService(config, $q, $http, env) {

        var service = {};
        /* **********APIs **************** */
        service.get = function() {
            return $http.get(env.get('apiroot') + '/api/yourservice');
        };

        return service;
    }

})();

$http.get(env.get('apiroot')将根据主机环境返回 url。

于 2015-12-11T10:24:43.573 回答
5

好问题!

一种解决方案可能是继续使用您的 config.xml 文件,并从后端向您生成的 html 提供 api 端点信息,如下所示(php 中的示例):

<script type="text/javascript">
angular.module('YourApp').constant('API_END_POINT', '<?php echo $apiEndPointFromBackend; ?>');
</script>

也许不是一个很好的解决方案,但它会起作用。

另一种解决方案可能是保持API_END_POINT恒定值,因为它应该在生产中,并且只修改您的主机文件以将该 url 指向您的本地 api。

或者也许是使用localStorage覆盖的解决方案,如下所示:

.factory('User',['$resource','API_END_POINT'],function($resource,API_END_POINT){
   var myApi = localStorage.get('myLocalApiOverride');
   return $resource((myApi || API_END_POINT) + 'user');
});
于 2013-05-02T14:04:04.660 回答
4

线程很晚,但我使用过的一种技术,pre-Angular,是利用 JSON 和 JS 的灵活性来动态引用集合键,并使用环境中不可剥夺的事实(主机服务器名称、当前浏览器语言等)作为输入以选择性地区分/首选 JSON 数据结构中的后缀键名。

这不仅提供了部署环境上下文(每个 OP),还提供了任何任意上下文(例如语言)来提供 i18n 或同时需要的任何其他变化,并且(理想情况下)在单个配置清单中,没有重复,并且可读性明显。

大约 10 行香草 JS

过于简单但经典的示例:JSON 格式的属性文件中的 API 端点基本 URL 会因环境而异,其中(natch)主机服务器也会有所不同:

    ...
    'svcs': {
        'VER': '2.3',
        'API@localhost': 'http://localhost:9090/',
        'API@www.uat.productionwebsite.com': 'https://www.uat.productionwebsite.com:9090/res/',
        'API@www.productionwebsite.com': 'https://www.productionwebsite.com:9090/api/res/'
    },
    ...

辨别功能的关键就是请求中的服务器主机名。

当然,这可以与基于用户语言设置的附加键结合使用:

    ...
    'app': {
        'NAME': 'Ferry Reservations',
        'NAME@fr': 'Réservations de ferry',
        'NAME@de': 'Fähren Reservierungen'
    },
    ...

区分/偏好的范围可以限于单个键(如上),其中“基本”键仅在函数输入有匹配键+后缀时才会被覆盖——或整个结构,以及该结构本身递归解析以匹配歧视/偏好后缀:

    'help': {
        'BLURB': 'This pre-production environment is not supported. Contact Development Team with questions.',
        'PHONE': '808-867-5309',
        'EMAIL': 'coder.jen@lostnumber.com'
    },
    'help@www.productionwebsite.com': {
        'BLURB': 'Please contact Customer Service Center',
        'BLURB@fr': 'S\'il vous plaît communiquer avec notre Centre de service à la clientèle',
        'BLURB@de': 'Bitte kontaktieren Sie unseren Kundendienst!!1!',
        'PHONE': '1-800-CUS-TOMR',
        'EMAIL': 'customer.service@productionwebsite.com'
    },

所以,如果生产网站的访问用户有德语(de)语言偏好设置,上述配置将崩溃为:

    'help': {
        'BLURB': 'Bitte kontaktieren Sie unseren Kundendienst!!1!',
        'PHONE': '1-800-CUS-TOMR',
        'EMAIL': 'customer.service@productionwebsite.com'
    },

如此神奇的偏好/歧视 JSON 重写函数是什么样的?不多:

// prefer(object,suffix|[suffixes]) by/par/durch storsoc
// prefer({ a: 'apple', a@env: 'banana', b: 'carrot' },'env') -> { a: 'banana', b: 'carrot' }
function prefer(o,sufs) {
    for (var key in o) {
        if (!o.hasOwnProperty(key)) continue; // skip non-instance props
        if(key.split('@')[1]) { // suffixed!
            // replace root prop with the suffixed prop if among prefs
            if(o[key] && sufs.indexOf(key.split('@')[1]) > -1) o[key.split('@')[0]] = JSON.parse(JSON.stringify(o[key]));

            // and nuke the suffixed prop to tidy up
            delete o[key];

            // continue with root key ...
            key = key.split('@')[0];
        }

        // ... in case it's a collection itself, recurse it!
        if(o[key] && typeof o[key] === 'object') prefer(o[key],sufs);

    };
};

在我们的实现中,包括 Angular 和 Angular 之前的网站,我们通过将 JSON 放在一个自执行的 JS 闭包中(包括 prefer() 函数,并提供主机名和语言代码(并接受您可能需要的任何其他任意后缀):

(function(prefs){ var props = {
    'svcs': {
        'VER': '2.3',
        'API@localhost': 'http://localhost:9090/',
        'API@www.uat.productionwebsite.com': 'https://www.uat.productionwebsite.com:9090/res/',
        'API@www.productionwebsite.com': 'https://www.productionwebsite.com:9090/api/res/'
    },
    ...
    /* yadda yadda moar JSON und bisque */

    function prefer(o,sufs) {
        // body of prefer function, broken for e.g.
    };

    // convert string and comma-separated-string to array .. and process it
    prefs = [].concat( ( prefs.split ? prefs.split(',') : prefs ) || []);
    prefer(props,prefs);
    window.app_props = JSON.parse(JSON.stringify(props));
})([location.hostname, ((window.navigator.userLanguage || window.navigator.language).split('-')[0])  ] );

Angular 之前的站点现在将有一个折叠的(没有 @ 后缀键)window.app_props来引用。

Angular 站点,作为 bootstrap/init 步骤,简单地将死掉的 props 对象复制到 $rootScope,并(可选)从全局/窗口范围中销毁它

app.constant('props',angular.copy(window.app_props || {})).run( function ($rootScope,props) { $rootScope.props = props; delete window.app_props;} );

随后注入控制器:

app.controller('CtrlApp',function($log,props){ ... } );

或从视图中的绑定中引用:

<span>{{ props.help.blurb }} {{ props.help.email }}</span>

注意事项?@ 字符不是有效的 JS/JSON 变量/键命名,但目前已被接受。如果这会破坏交易,请替换您喜欢的任何约定,例如“__”(双下划线),只要您坚持它。

该技术可以应用于服务器端,移植到 Java 或 C#,但您的效率/紧凑性可能会有所不同。

或者,函数/约定可以是前端编译脚本的一部分,这样完整的全环境/全语言 JSON 永远不会通过网络传输。

更新

我们已经改进了这种技术的使用,允许一个键有多个后缀,以避免被迫使用集合(你仍然可以,只要你想要的深度),以及尊重首选后缀的顺序。

示例(另见工作jsFiddle):

var o = { 'a':'apple', 'a@dev':'apple-dev', 'a@fr':'pomme',
          'b':'banana', 'b@fr':'banane', 'b@dev&fr':'banane-dev',
          'c':{ 'o':'c-dot-oh', 'o@fr':'c-point-oh' }, 'c@dev': { 'o':'c-dot-oh-dev', 'o@fr':'c-point-oh-dev' } };

/*1*/ prefer(o,'dev');        // { a:'apple-dev', b:'banana',     c:{o:'c-dot-oh-dev'}   }
/*2*/ prefer(o,'fr');         // { a:'pomme',     b:'banane',     c:{o:'c-point-oh'}     }
/*3*/ prefer(o,'dev,fr');     // { a:'apple-dev', b:'banane-dev', c:{o:'c-point-oh-dev'} }
/*4*/ prefer(o,['fr','dev']); // { a:'pomme',     b:'banane-dev', c:{o:'c-point-oh-dev'} }
/*5*/ prefer(o);              // { a:'apple',     b:'banana',     c:{o:'c-dot-oh'}       }

1/2(基本用法)喜欢'@dev'键,丢弃所有其他后缀键

3更喜欢 '@dev' 而不是 '@fr',更喜欢 '@dev&fr' 而不是所有其他人

4(与 3 相同,但更喜欢 '@fr' 而不是 '@dev')

5无首选后缀,删除所有后缀属性

它通过对每个后缀属性进行评分并在迭代属性并找到更高得分的后缀时将后缀属性的值提升到非后缀属性来实现这一点。

此版本中的一些效率,包括消除对 JSON 的依赖以进行深度复制,并且仅递归到在其深度处得分轮次中幸存的对象:

function prefer(obj,suf) {
    function pr(o,s) {
        for (var p in o) {
            if (!o.hasOwnProperty(p) || !p.split('@')[1] || p.split('@@')[1] ) continue; // ignore: proto-prop OR not-suffixed OR temp prop score
            var b = p.split('@')[0]; // base prop name
            if(!!!o['@@'+b]) o['@@'+b] = 0; // +score placeholder
            var ps = p.split('@')[1].split('&'); // array of property suffixes
            var sc = 0; var v = 0; // reset (running)score and value
            while(ps.length) {
                // suffix value: index(of found suffix in prefs)^10
                v = Math.floor(Math.pow(10,s.indexOf(ps.pop())));
                if(!v) { sc = 0; break; } // found suf NOT in prefs, zero score (delete later)
                sc += v;
            }
            if(sc > o['@@'+b]) { o['@@'+b] = sc; o[b] = o[p]; } // hi-score! promote to base prop
            delete o[p];
        }
        for (var p in o) if(p.split('@@')[1]) delete o[p]; // remove scores
        for (var p in o) if(typeof o[p] === 'object') pr(o[p],s); // recurse surviving objs
    }
    if( typeof obj !== 'object' ) return; // validate
    suf = ( (suf || suf === 0 ) && ( suf.length || suf === parseFloat(suf) ) ? suf.toString().split(',') : []); // array|string|number|comma-separated-string -> array-of-strings
    pr(obj,suf.reverse());
}
于 2016-06-22T06:11:53.870 回答
2

如果您使用的是Brunch,插件Constangular可以帮助您管理不同环境的变量。

于 2014-05-13T08:09:40.763 回答
-8

你见过这个问题及其答案吗?

您可以像这样为您的应用设置全局有效值:

app.value('key', 'value');

然后在您的服务中使用它。您可以将此代码移动到 config.js 文件并在页面加载或其他方便的时刻执行它。

于 2013-05-02T14:18:07.067 回答