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

Question

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

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 之前设置变量时遇到问题）

这些是我关注的集合

从您的 html 文件中删除 ng-app="appName"，因为这是导致问题的原因。 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"]);
        });
     });

这将在您每次刷新页面时 load/set 新值。您甚至可以在运行时间更改 conf.json 文件，刷新页面将负责更新值。

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

Value not set to global variable in JS/AngularJs

javascript

angularjs

angular-services

gulp

angular-factory