如何从配置文件中设置角值?

I have an app that I have inherited that I have to support. So far it had only run on one server and we want to run it on different servers. We found hard coded references to the server name all over the place in python server code and C++ client code. It was easy enough to change those to read the server name from a config file. But now I find is a js module this code:

我有一个我必须支持的继承的应用。到目前为止，它只在一台服务器上运行，我们希望在不同的服务器上运行它。我们在python服务器代码和c++客户端代码中到处都可以找到对服务器名的硬编码引用。可以很容易地更改那些从配置文件中读取服务器名称的方法。但现在我发现这是一个js模块的代码:

angular.module('app.config', []).constant('config', {"api":"http://foo.bar.com:8001/"});

How can I change this so that the value for the server is read dynamically from a config file or some other means that would not require it to be hard coded?

如何更改它，以便从配置文件或其他不需要硬编码的方式动态读取服务器的值?

Here is an update with what I have tried:

以下是我的最新尝试:

Originally, my code had this:

最初，我的代码是这样的:

angular.module('app.config', []).constant(
  'config', {"api":"http://foo.bar.com:8001/"}
);

and I changed it to this:

我把它改成这样

angular.module('app.config').controller('myCtrl', 
  function($scope, $http) { 
    $http.get('./config.json') 
      .then(function(response) { 
        $scope.api = response.data; 
    }); 
});

and I got this:

我得到了这个:

error Module 'app.config' is not available!

Then I changed it to:

然后我把它改成:

angular.module('app.config', [] ).controller('myCtrl', 
  function($scope, $http) { 
    $http.get('./config.json') 
      .then(function(response) { 
        $scope.api = response.data; 
      }); 
});

And then I get:

然后我得到:

Error: [$injector:unpr] Unknown provider: configProvider <- config <- workitem

I feel I am very close, I just need a bit more help.

我觉得我很亲密，我只是需要更多的帮助。

Another update:

另一个更新:

I tried this:

我试着这样的:

angular.module('app').controller('home', ['$scope', homeCtrl]);
angular.module('app').controller('workitem', ['$scope', '$routeParams', '$sce', '$timeout', '$http', 'config', workitemCtrl]);
},{"./home/home.js":3,"./workitem/workitem.js":4,"angular":10,"angular-route":6,"angular-sanitize":8,"bootstrap-treeview/src/js/bootstrap-treeview.js":11}],2:[function(require,module,exports){
  module.exports = function($scope,$http) {
      $http.get('config.json').success(function(reponse) {
          console.log("reponse --> "+reponse.api);
          $scope.api = reponse.api;
      });
  }

But then of course app.config was not getting defined. How could I do this an still define app.config?

但是之后app。config并没有被定义。如何使用still define app.config呢?

I just tried this:

我只是尝试:

var my_config = {};

$.getJSON("config.json", function(data) {
  $.each(data, function(key, val) {
    my_config[key] = val;
  });
});

but I get my_config is not defined when I use it down in the controller. How can I make that variable available in the controller?

但是当我在控制器中使用my_config时，它没有定义。如何使该变量在控制器中可用?

4 个解决方案

#1

Try This

试试这个

angular.module('app.config', [])
.constant('bbConfig',{ 
     "api":"http://foo.bar.com:8001/"
 });

In controller

在控制器

angular.module('app.config', [])
.controller('MainCtrl',['$scope', 'bbConfig' , function ($scope, bbConfig){
    console.log(bbConfig.api)
}]);

#2

Create a service to read the config (json file) or make a call to server and store the response URL in LocalStorage like the following. You can access it from every where

创建一个服务来读取配置(json文件)或调用服务器，并将响应URL存储在LocalStorage中，如下所示。你可以从任何地方访问它。

$localStorage.api = response.Url ; // http://foo.bar.com:8001/

localStorage美元。api =响应。Url;/ / http://foo.bar.com:8001 /

#3

I was finally able to get this working by doing this up front:

我终于能够通过提前做这件事来实现这个目标:

angular.module('app').value('config', {
  api: ''
});

angular.module('app').run(function($rootScope, $http, config) {
  $http.get('config/config.json').then(function(response) {
        config.api = response.data.api;
        $rootScope.$broadcast('config-loaded');
    });
});

Wrapping the main code in:

将主要代码封装在:

var init = function(){
}

And adding this at the end:

最后加上这个

if (config.api) {
  init()
} else {
    var configLoaded = scope.$on('config-loaded', function() {
        init();
        configLoaded();
    });
}

#4

You can do:

你能做什么:

Use ngConstant build task to wrap your standalone config file in JSON format into the includable angular.config data. Suppose you have app/config.json file:

使用ngConstant构建任务将JSON格式的独立配置文件包装成可包含的角度。配置数据。假设你有应用程序/配置。json文件:

{ "myFirstCnt": true, "mySecondCnt": { "hello": "world" } }

{“myFirstCnt”:true，“mySecondCnt”:{“hello”:“world”}

Then after running the ngConstant task in you build you'll get dist/config.js (output) will be :

然后在构建中运行ngConstant任务之后，您将获得dist/config。js(输出)为:

define(["require", "exports"], function(require, exports) {
  return angular.module("my.module.config", ["ngAnimate"])
    .constant("myFirstCnt", true)
    .constant("mySecondCnt", { "hello": "world" })
    .constant("myPropCnt", "hola!");
});

Gulp plugin, Grunt plugin, more on ngConstant

Gulp插件，Grunt插件，更多关于ngConstant

Use service to load the JSON file immediately after you app bootstraps in service or in the controller:
使用服务在应用程序启动后立即加载JSON文件或在控制器中:

should avoid this:

应该避免这种情况:

app.controller('myCtrl', 
  function($scope, $http) {
    $http.get('PATH_TO/config.json').then(function(response) {
      $scope.myWelcome = response.data;
    });
  }
);

More on that way example here: Reading in JSON through Angular Resources Service

更多关于这种方式的示例:通过角资源服务读取JSON

UPD 12-06

乌利希期刊指南12-06

For parsing loaded JSON try this:

对于解析加载的JSON，请尝试以下操作:

for (var name in data) {
  if (data.hasOwnProperty(var)) {
     my_config[var] = data[var];
  }
}

#1