使用$HTTP.GET调用响应初始化AngularJS常量

Question

例如：-

    angular.module('A',[]);
    angular.module('A').run( function ($rootScope,$http){
      $rootScope.safeApply = function (fn) {

                $http.get('url').success(function(result){

                    // This doesn't work. I am not able to inject 'theConstant' elsewhere in my application
                    angular.module('A').constant('theConstant', result);
                });                   
                var phase = $rootScope.$$phase;
                if (phase === '$apply' || phase === '$digest') {
                    if (fn && (typeof (fn) === 'function')) {
                        fn();
                    }
                } else {
                    this.$apply(fn);
                }
            };
      });

我想在我的应用程序初始化的时候设置这个常数，并且能够在我的组件之间共享这个常数。

什么是实现这一目标的最佳方法？

Answer 1

初始化应用程序时，$http.get的结果不可用。只有在服务器交付时才可用。因此，简单地将该值保持在模块常量中是不可能的。你冒着

但是，您可以做的是将对$http.get的调用包装在一个服务中，并将该服务注入到您需要常量的任何地方。（请注意，不能在配置块中注入服务。）

// grab the "constant"
angular.module('A').factory('almostConstant', function () {
  return $http.get('url').then(function(response) {
    return response.data;
  });
});

// use the "constant"
angular.module('A').controller('controller', function($scope, almostConstant) {
  almostConstant.then(function(data){
    $scope.almostConstant = data;
  });  
});

访问almostConstant值的模式有点尴尬，这是由于它的异步性质。它只是在一个未指定的时间可用，所以试图以同步方式访问它可能会引入很多微妙的定时错误。

一种非常不偏颇的方法是直接在JS文件中写入常量。此时，您的服务器可以用一个值来回答对'url'的请求。相反，您可以使用以下字符串使它响应对'url.js'的请求：

angular.module('A').constant('theConstant', result);

结果显然是你的常量。例如，如果您在后端使用php，它可能如下所示：

<?php
   header('Content-Type: application/javascript');
   $constant = retrieveMyConstant();
?>
angular.module('A').constant('theConstant', <?php echo $constant; ?>);

确保常量实际上看起来像JavaScript值。如果是字符串，则将其包装在'中，如果是JSON对象，则编写其序列化，等等。

之后，只需在index.html文件中包含一个指向url.js的脚本标记。

注意，这个解决方案是同步的，所以如果在服务器上检索常量需要一段时间，就会影响您的页面加载时间。