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

12 浏览
0 Comments

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

在不同的环境中，您如何管理配置变量/常量？\n以下是一个例子：\n我的REST API可通过localhost:7080/myapi/访问，但是我的朋友在同一份使用Git版本控制的代码上部署了API到他的Tomcat上的localhost:8099/hisapi/。\n假设我们有类似于以下的代码：\n

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

\n根据环境，我如何动态注入正确的API端点值？\n在PHP中，我通常会使用一个config.username.xml文件来完成此类操作，将基本配置文件（config.xml）与通过用户名识别的本地环境配置文件合并。但是我不知道如何在JavaScript中管理这种情况。

0

3 答案

0 Comments

问题的出现原因：用户想要在Angular.js中配置不同的环境，但是他在使用gulp-ng-constant时遇到了一个问题。

解决方法：用户可以使用以下代码来解决问题：

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();

}));

如果用户想要移除gulp ng constant的依赖数组，可以通过在grunt ng constant package中传递deps: false参数来实现。但是在gulp ng constant中没有这个选项。用户需要进一步寻求帮助。

0
0 Comments

Angular.js的一个常见问题是如何配置不同的环境。有一个很酷的解决方案是将所有与环境相关的值分离到一个独立的Angular模块中，其他模块依赖于该模块。

首先，创建一个名为"configuration"的模块，并定义一些常量，比如API_END_POINT和HOST。

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

然后，在需要使用这些常量的模块中声明对"configuration"模块的依赖。

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

现在，我们可以思考一些更酷的功能。

将包含配置的模块分离成一个名为"configuration.js"的脚本，并在页面中引入它。这样每个人都可以轻松地编辑它，只要不将该独立文件提交到git中。如果配置文件是独立的，不需要检入git会更加容易。此外，你还可以在本地分支上进行更改。

如果你有一个构建系统，比如ANT或Maven，你可以实现一些占位符来替换构建时的API_END_POINT的值。或者你可以有"configuration_a.js"和"configuration_b.js"，然后在后端决定要包含哪个文件。

0
0 Comments

Angular.js是一个流行的JavaScript框架，用于构建Web应用程序。在开发和生产环境中使用不同的配置是一个常见的需求。本文将介绍如何在Angular.js中配置不同的环境，并提供了一种解决方案。

解决方案使用了一个名为Grunt的构建工具，并使用了一个叫做grunt-ng-constant的插件。首先，在Gruntfile.js文件中配置ngconstant插件的参数。然后根据需要定义不同的环境，如开发环境和生产环境。每个环境都有自己的配置常量，如"ENV: 'development'"和"ENV: 'production'"。然后，在Gruntfile.js文件中定义了几个任务，如'server'和'build'。这些任务会在生成配置文件和构建应用程序时使用ngconstant插件。

运行'grunt server'命令将在'app/scripts/'目录下生成一个名为config.js的配置文件。该文件包含了一个名为"config"的Angular模块，并定义了一个名为"ENV"的常量，值为"development"。最后，在应用程序的模块中声明对"config"模块的依赖，并将"ENV"常量注入到需要使用它的控制器中。

通过这种方式，可以在不同的环境中注入不同的常量，并根据常量的值执行不同的逻辑。

除了Grunt和grunt-ng-constant插件外，还提到了另一个类似的工具gulp-ng-constant，适用于使用Gulp构建工具的开发者。

整个过程中，主要使用了Grunt和grunt-ng-constant插件来配置不同的环境，并通过注入常量来实现环境相关的逻辑。这种方法可以让团队成员在同一个应用程序上工作时轻松地切换不同的环境配置。

0