微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在Angular.js中配置不同的环境?

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

这可能是一个例子:

我的rest API是可以在localhost:7080 / myapi /,但我的朋友工作相同的代码在Git版本控制下的API部署在他的Tomcat在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?

我有点迟到的线程,但如果你使用 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','watch'
  ]);
});

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

所以运行grunt服务器将生成一个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' ) {
    ...
  }
}]);

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐