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

javascript angularjs angularjs-service

2022-08-30 01:00:37

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

这可能是一个例子：

我的 rest API 可以在上访问，但是我的朋友在 Git 版本控制下处理相同的代码，他的 Tomcat 上部署了 API。localhost:7080/myapi/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.xml）与由用户名识别的本地环境配置文件合并。但是我不知道如何在JavaScript中管理这种事情？config.username.xml

答案 1

我对这个主题有点晚了，但是如果你使用Grunt，我已经在grunt-ng-constant上取得了巨大的成功。

在我的配置部分看起来像ngconstantGruntfile.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 serverconfig.jsapp/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' ) {
    ...
  }
}]);

答案 2

一个很酷的解决方案可能是将所有特定于环境的值分离到一些单独的角度模块中，所有其他模块都依赖于这些模块：

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');
       });

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

包含配置的模块可以分为配置.js，这些配置将包含在您的页面中。

你们每个人都可以轻松编辑此脚本，只要您不将此单独文件签入git即可。但是，如果配置位于单独的文件中，则更容易不签入配置。此外，您可以在本地分支它。

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

或者你有你的和，并在后端决定包括哪个。configuration_a.jsconfiguration_b.js