如何基于获取的环境变量动态设置AngularjJS基本URL？

一尘不染

如何基于获取的环境变量动态设置AngularjJS基本URL？

angularjs

我有一个开发和生产环境，其中我的URL不同：

生产：

www.exmaple.com/page

发展：

dev.environment/project/page

我知道我可以在AngularJS中使用

<base href='/project/' />

但这对我没有帮助。在加载AngularJS应用程序之前，我先获取一个配置文件（在app.js中，使用以下.run语句，该语句读取具有以下环境的变量：

]).run([
  '$rootScope',
  '$http',
  function (
    $rootScope,
    $http
  ) {
    var configDeferred = $q.defer();

    // fetch config and set the API    
    $http.get('config.json').then(function(response) {
      $rootScope.config = response.data;
      configDeferred.resolve();
    });

    // Wait for the config to be loaded, then go to state
    $rootScope.$on('$stateChangeStart', function (event, next, current) {
      event.preventDefault();
      $q.all([configDeferred.promise]).then(function() {
        $state.transitionTo(next.name);
        return;
      });
    });

有没有一种方法可以基于AngularJS中的配置文件（可能带有.htaccess）来动态设置基本URL？

尝试1： 尝试通过获取配置，.run并通过ng-href设置基本网址：

在我的app.js中编辑以下代码行：

// fetch config and set the API    
$http.get('config.json').then(function(response) {
  $rootScope.config = response.data;
  $rootScope.baseUrl = response.data.baseUrl; // '/project/'
  configDeferred.resolve();
});

在我的index.html中：

<base ng-href="{{baseUrl}}" />

看来这是行不通的：当我将tag的href属性更改为ng-
href时，它将正确加载内容，但将URL更改为dev.environment/page而不是dev.environment/project/page

更新： 配置文件：

{
  "mode": "development",
  "baseUrl": "/project/"
}

阅读 327

2020-07-04

共1个答案

一尘不染

我个人会用来做这种事情grunt。

当我运行我的angular-app时，我有多个任务：

> grunt run --target=dev
> grunt run --target=prod
> grunt build --target=dev
> grunt build --target=prod
> etc...

然后在grunt-preprocess模块的帮助下进行字符串替换：

我的constants.tpl.js文件被解析：

[...]
baseUrl:           '/* @echo ENV_WS_URL */',
[...]

并填充了网址。

有无穷的可能性（字符串替换，文件复制等）。

使用grunt进行操作可确保例如dev config文件不会进入生产环境。

如果您有兴趣，我可以提供更多详细信息，但我只想向您展示一种不同的方法。

编辑gruntFile示例：

'use strict';

module.exports = function(grunt) {

    /**
     * Retrieving current target
     */
    var target = grunt.option('target') || 'dev';
    var availableTargets = [
        'dev',
        'prod'
    ];

    /**
     * Load environment-specific variables
     */
    var envConfig = grunt.file.readJSON('conf.' + target + '.json');

    /**
     * This is the configuration object Grunt uses to give each plugin its
     * instructions.
     */
    grunt.initConfig({
        env: envConfig,

        /*****************************************/
        /* Build files to a specific env or mode */
        /*****************************************/
        preprocess: {
            options: {
                context: {
                    ENV_WS_URL: '<%= env.wsUrl %>'
                }
            },
            constants: {
                src: 'constants.tpl.js',
                dest: 'constants.js'
            }
        },

        karma: {
            unit: {
                configFile: '<%= src.karma %>',
                autoWatch: false,
                singleRun: true
            },
            watch: {
                configFile: '<%= src.karma %>',
                autoWatch: true,
                singleRun: false
            }
        }

    });


    /****************/
    /* Plugins load */
    /****************/
    grunt.loadNpmTasks('grunt-preprocess');

    /*******************/
    /* Available tasks */
    /*******************/
    grunt.registerTask('run', 'Run task, launch web server for dev part', ['preprocess:constants']);

};

现在，命令：

> grunt run --target=dev

将使用网址创建一个新文件

2020-07-04