AngularJS：使用异步数据初始化服务

Question

我有一个AngularJS服务，我想用一些异步数据初始化它。类似这样的事情：

myModule.service('MyService', function($http) {
    var myData = null;

    $http.get('data.json').success(function (data) {
        myData = data;
    });

    return {
        setData: function (data) {
            myData = data;
        },
        doStuff: function () {
            return myData.getSomeData();
        }
    };
});

显然，这是行不通的，因为如果在mydata返回之前，有东西试图调用dostuff()，我将得到一个空指针异常。据我所知，从这里和这里所问的其他一些问题中，我有几个选择，但没有一个看起来很清楚（也许我遗漏了什么）：

使用“运行”设置服务

设置应用程序时,请执行以下操作：

myApp.run(function ($http, MyService) {
    $http.get('data.json').success(function (data) {
        MyService.setData(data);
    });
});

那么我的服务将如下所示：

myModule.service('MyService', function() {
    var myData = null;
    return {
        setData: function (data) {
            myData = data;
        },
        doStuff: function () {
            return myData.getSomeData();
        }
    };
});

这在某些时候起作用，但如果异步数据的时间恰好比初始化所有内容所需的时间长，则在调用dostuff()时会出现空指针异常

使用promise对象

这可能有用。唯一的缺点是，在我调用MyService的任何地方，我都必须知道doStuff（）返回一个Promission，并且所有代码都必须提供给我们then以便与Promission交互。我宁愿等到myData返回后再加载my应用程序。

手动引导

angular.element(document).ready(function() {
    $.getJSON("data.json", function (data) {
       // can't initialize the data here because the service doesn't exist yet
       angular.bootstrap(document);
       // too late to initialize here because something may have already
       // tried to call doStuff() and would have got a null pointer exception
    });
});

全局Javascript Var我可以将JSON直接发送到全局Javascript变量：

HTML：

<script type="text/javascript" src="data.js"></script>

data.js：

var dataForMyService = { 
// myData here
};

则在初始化myservice时可用：

myModule.service('MyService', function() {
    var myData = dataForMyService;
    return {
        doStuff: function () {
            return myData.getSomeData();
        }
    };
});

这也可以工作，但我有一个全局javascript变量，气味很难闻。

这是我唯一的选择吗？这些选项中有一个比其他选项好吗？我知道这是一个相当长的问题，但我想表明我已经尝试探索我的所有选择。如有任何指导，将不胜感激。

Answer 1

基于Martin Atkins的解决方案，这里有一个完整、简洁的纯角度解决方案：

(function() {
  var initInjector = angular.injector(['ng']);
  var $http = initInjector.get('$http');
  $http.get('/config.json').then(
    function (response) {
      angular.module('config', []).constant('CONFIG', response.data);

      angular.element(document).ready(function() {
          angular.bootstrap(document, ['myApp']);
        });
    }
  );
})();

该解决方案使用一个自动执行的匿名函数来获取$HTTP服务，请求配置，并在配置变得可用时将其注入到名为config的常量中。

完成后，我们等待文档准备就绪，然后引导Angular应用程序。

这比Martin的解决方案稍有增强，Martin的解决方案将获取配置推迟到文档准备就绪之后。据我所知，没有理由因此而延迟$HTTP调用。

单元测试

注意：我发现当代码包含在app.js文件中时进行单元测试时，这个解决方案不能很好地工作。出现这种情况的原因是，当加载JS文件时，上面的代码立即运行。这意味着测试框架（在我的例子中是Jasmine）没有机会提供$HTTP的模拟实现。

我的解决方案是将这段代码移动到index.html文件中，这样Grunt/karma/jasmine单元测试基础结构就看不到它了，我对此并不完全满意。

Answer 2

您看过$RouteProvider.When（“/path”,{resolve：{...}吗？它可以使承诺方法更清晰：

在您的服务中暴露一个承诺：

app.service('MyService', function($http) {
    var myData = null;

    var promise = $http.get('data.json').success(function (data) {
      myData = data;
    });

    return {
      promise:promise,
      setData: function (data) {
          myData = data;
      },
      doStuff: function () {
          return myData;//.getSomeData();
      }
    };
});

将解析添加到路由配置：

app.config(function($routeProvider){
  $routeProvider
    .when('/',{controller:'MainCtrl',
    template:'<div>From MyService:<pre>{{data | json}}</pre></div>',
    resolve:{
      'MyServiceData':function(MyService){
        // MyServiceData will also be injectable in your controller, if you don't want this you could create a new promise with the $q service
        return MyService.promise;
      }
    }})
  }):

在解决所有依赖项之前,您的控制器不会被实例化：

app.controller('MainCtrl', function($scope,MyService) {
  console.log('Promise is now resolved: '+MyService.doStuff().data)
  $scope.data = MyService.doStuff();
});

我在plnkr:http://plnkr.co/edit/gkg21xh0rwcmeqgudzkh?p=preview上举了一个例子