Question

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

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

如何更改此值以便从配置文件或其他一些不需要硬编码的方法动态读取服务器的值？

以下是我尝试过的更新内容：

最初，我的代码有这个：

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

我把它改成了这个：

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

我得到了这个：

error Module 'app.config' is not available!

然后我把它改为：

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

然后我得到：

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

我觉得我非常接近，我只需要更多的帮助。

另一个更新：

我试过了：

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

但当然app.config没有定义。我怎么能这样做仍然定义app.config？

我刚试过这个：

var my_config = {};

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

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

Answer 1

试试这个

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

在控制器中

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

Answer 2

你可以这样做：

使用 ngConstant 构建任务将JSON格式的独立配置文件包装到includable angular.config数据中。假设您有app/config.json个文件：

{ “myFirstCnt”：是的， “mySecondCnt”：{“你好”：“世界”} }

然后在你构建中运行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

使用服务在应用程序引导服务或控制器后立即加载JSON文件：

应该避免这种情况：

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

更多关于这方面的示例：Reading in JSON through Angular Resources Service

UPD 12-06

对于解析加载的JSON，请尝试：

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

Answer 3

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

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

Answer 4

我最终能够通过这样做来实现这一目标：

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');
    });
});

将主要代码包装在：

var init = function(){
}

最后添加：

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

如何从配置文件中设置角度值？

4 个答案: