如何在角度应用程序启动之前从.json文件加载一些设置

时间:2014-12-31 11:35:57

标签: json angularjs

我正在构建使用CORS请求的应用程序。我使用的每个请求都从常量

获取主机地址
angular.module('siteApp').constant('baseUrl', {
'server':'htttp://localhost/',
})

在我使用的每个服务中发送这样的请求:

angular.module('siteApp').factory('DocsSvc', function ($http, baseUrl) {
   var baseurl = baseUrl.server ;
   $http.get(baseurl + 'document')

是否可以制作' htttp:// localhost /'值 - 来自config.json文件到baseUrl常量或baseUrl工厂? 我的意思是:我如何从ajax请求中加载某些内容以使其可以访问app模块

我试过了:

.run(['$rootScope', , function ($rootScope) {

  $.ajax('config.json', {async: false})
  .success(function (data) {
    $rootScope.HOST = data.HOST;
  });

并尝试从baseUrl访问它:

angular.module('siteApp').factory('baseUrl',function($rootScope) {
 return {
  server: $rootScope.HOST

但没有运气 - baseUrl.server未定义为函数

4 个答案:

答案 0 :(得分:7)

您可以使用run角度方法。

  var app = angular.module('plunker', []);

  app.run(function($http, $rootScope){
  $http.get('config.json')
  .success(function(data, status, headers, config) {
    $rootScope.config = data;
    $rootScope.$broadcast('config-loaded');
  })
  .error(function(data, status, headers, config) {
    // log error
    alert('error');
  });
})

app.controller('MainCtrl', function($scope, $rootScope) {
  $scope.$on('config-loaded', function(){
    $scope.name = $rootScope.config.name;  
  });
});

请参阅此plunker

答案 1 :(得分:2)

如果您想在角度应用程序启动之前执行此操作,您可以使用引导程序功能而不是使用ng-app指令。

自: https://docs.angularjs.org/api/ng/function/angular.bootstrap

<!doctype html>
<html>
<body>
<div ng-controller="WelcomeController">
  {{greeting}}
</div>

<script src="angular.js"></script>
<script>
  var app = angular.module('demo', [])
  .controller('WelcomeController', function($scope) {
      $scope.greeting = 'Welcome!';
  });
  // Do your loading of JSON here
  angular.bootstrap(document, ['demo']);
</script>
</body>
</html>

答案 2 :(得分:1)

你需要告诉有关数据更改的角度,所以修改你的代码如下:

.run(['$rootScope', function ($rootScope) {

  $.ajax('config.json', {async: false})
  .success(function (data) {
    $rootScope.HOST = data.HOST;
    $rootScope.$apply();            // New line
  });
}])

因为它是一个非角度的异步调用,所以需要$apply()

答案 3 :(得分:0)

使用打击代码片段加载json值

function chunkArrayInGroups(arr, size) {
  var newArr = [];
  while (arr.length) {
    newArr.push(arr.splice(0, size));
  }
  return newArr;
}

});