我该如何配置Angular.js不同的环境？ [英] How do I configure different environments in Angular.js?

问题描述

你是如何管理配置变量/常量针对不同的环境？

How do you manage configuration variables/constants for different environments?

这可能是一个例子：

我的REST API可达上本地主机：7080 / myapi / ，但我的朋友说，在Git版本控制下的同一code工作有部署的API他的Tomcat上本地主机：8099 / hisapi /

My rest API is reachable on localhost:7080/myapi/, but my friend that works on the same code under Git version control has the API deployed on his Tomcat on localhost:8099/hisapi/.

假设我们有这样的事情：

Supposing that we have something like this :

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端点的正确值，取决于环境？

How do I dynamically inject the correct value of the API endpoint, depending on the environment?

在PHP我通常做这种东西用 config.username.xml 文件，合并与当地的环境配置文件中的基本配置文件（config.xml）由用户的名称识别。但我不知道如何在JavaScript的处理这种事情？

In PHP I usually do this kind of stuff with a config.username.xml file, merging the basic configuration file (config.xml) with the local environment configuration file recognised by the name of the user. But I don't know how to manage this kind of thing in JavaScript?

推荐答案

我有点晚了线程，但如果你使用的咕噜我已经与 grunt- NG-恒 。

I'm a little late to the thread, but if you're using Grunt I've had great success with 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'
]);

所以运行咕噜服务器将生成一个 config.js 文件中的应用程序/脚本/ ，看起来像

So running grunt server will generate a config.js file in app/scripts/ that looks like

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

最后，我宣布在任何模块需要依赖：

Finally, I declare the dependency on whatever modules need it:

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

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

Now my constants can be dependency injected where needed. E.g.,

app.controller('MyController', ['ENV', function( ENV ) {
  if( ENV === 'production' ) {
    ...
  }
}]);

这篇关于我该如何配置Angular.js不同的环境？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！