Question

我正在使用gulp来运行和构建以运行我的应用程序。我在$http文件中使用index.js服务获取文件内容，然后设置变量值

window.variablex = "http://localhost:8080/appname"。

这是我在做什么（在index.js）

(function ()
 {
  'use strict';

   angular
    .module('main')
    .controller('IndexController', IndexController);
function IndexController($http){
   $http.get('conf/conf.json').success(function(data){

     window.variable = data.urlValue;

  }).error(function(error){
    console.log(error);
  });
    }
});

我已经创建了一个工厂来调用后端应用程序的其余API，如

(function(){

  'use strict';

   angular
   .module('main')
   .factory('testService',['$resource',testService]);
     function agentService($resource){
 var agents = $resource('../controller/',{id:'@id'},
  {

    getList:{
      method:'GET',
      url:window.variable+"/controller/index/",
      isArray:false
}
});

现在，除了休息电话，我就像

一样

http://localhost:8080/appname/controller

但是它总是发送一个像http://undefined/appname/controller这样的调用，这是不正确的。

我可以在其他地方获取新的设置值，但不会以某种方式在resource service个对象中设置此值。我肯定错过了一些东西。

非常感谢任何帮助

Answer 1

当您使用Gulp时，我建议您使用gulp-ng-config

例如，您有config.json：

{
  "local": {
    "EnvironmentConfig": {
      "api": "http://localhost/"
    }
  },
  "production": {
    "EnvironmentConfig": {
      "api": "https://api.production.com/"
    }
  }
}

然后，gulpfile中的用法是：

gulp.task('config', function () {
    gulp.src('config.json')
        .pipe(gulpNgConfig('main.config', {
            environment: 'production'
        }))
        .pipe(gulp.dest('.'))
});

您将获得此输出：

angular.module('myApp.config', [])
.constant('EnvironmentConfig', {"api": "https://api.production.com/"});

然后，您必须在app.js中添加该模块

angular.module('main', [ 'main.config' ]);

要使用该变量，您必须在提供者中注入：

angular
    .module('main')
    .factory('testService', ['$resource', 'EnvironmentConfig', testService]);
function agentService($resource, EnvironmentConfig) {

    var agents = $resource('../controller/', {id: '@id'},
        {

            getList: {
                method: 'GET',
                url: EnvironmentConfig + "/controller/index/",
                isArray: false
            }
        });
}

Answer 2

@Kenji Mukai的回答确实有效，但我可能不得不在运行时更改配置，但它失败了。这就是我实现它的方式（如果在应用程序获得boostrap之前有任何问题设置变量）

这些是我遵循的套装

从ng-app="appName"文件中删除html，因为这是导致问题的原因。 Angular命中此标记并在其他任何内容之前引导您的应用程序。因此，在从服务器端（在我的情况下）加载数据之前，应用程序是引导的

在我的主模块中添加了以下内容

var injector = angular.injector(["ng"]);
var http = injector.get("$http");
   return http.get("conf/conf.json").then(function(response){
    window.appBaseUrl = response.data.gatewayUrl
      }).then(function bootstrapApplication() {
         angular.element(document).ready(function() {
         angular.bootstrap(document, ["yourModuleName"]);
        });
     });

每次刷新页面时都会加载/设置新值。您甚至可以在运行时更改conf.json文件，刷新页面将负责更新值。

值未在JS / AngularJs中设置为全局变量

2 个答案: