javascript - run 方法中的 Angular $q 服务实现

Question

我有一个示例，通过全局 loadJSON 函数从本地文件加载一些数据(全局不是强制性的，但更好)。

之后，我等待加载所有文档中的数据并打印 'i ve returned' 字符串。

问题是，我开始使用“x”服务中的数据，然后才设法将其从文件完全上传到内存中。

如何等到数据加载后才继续渲染页面并执行所有操作？

问题是我需要使用 $q 但我该怎么做呢？

function loadJSON(file, callback) {
  var doc = new XMLHttpRequest();
  doc.overrideMimeType("application/json");
  doc.open('GET', file, true);
  doc.onreadystatechange = function () {
    if (doc.readyState == 4 && doc.status == "200") {
      callback(JSON.parse(doc.responseText));
    }
  };
  doc.send(null);
}

angular
  .module('msApp')
  .factory('service.x', [
    function () {
      var _database = {};

      return {
        get: function (k1, k2) {
          return _database[k1][k2];
        },

        load: function (list, callback) {
          var length = list.length;
          var loaded = 0;

          function addToDB(name) {
            var url = './assets/{0}.json'.format(name);
            loadJSON(url, function (json) {
              _database[name] = json;

              loaded++;
              if (length === loaded && callback) callback();
            });
          }

          for (var i = 0; i < list.length; i++) {
            addToDB(list[i]);
          }
        }

      };
    }
  ]);

angular
  .module('msApp', [])
  .run([
    '$rootScope',
    'service.x',
    function ($rootScope, x) {

      x.load($rootScope.services, function () {
        console.log('i ve loaded')
      });

    }
  ])
  .config(function ($routeProvider) {

    $routeProvider
      .when('/sign', {
        templateUrl: '../views/sign.html',
        controller: 'signCtrl'
      })
      .when('/a', {
        templateUrl: '../views/a.html',
        controller: 'aCtrl'
          .otherwise({
            redirectTo: '/signin'
          });
  });

Answer 1

Controller 接受一个resolve参数，该参数允许您将依赖项注入(inject)到 Controller 中，这些依赖项可以是原始对象或 promise ，它会阻止 Controller 的实例化，直到它被解析:

$routeProvider.when('/routeA', {
  templateUrl: '/routeA.html',
  controller: 'controllerA',
  resolve: {
    mydata: ['service.x', function (x) {
      return x.load($rootScope.services);
    }]
  }
});

需要修改 load 和 addToDb 函数以返回 Promise:

load: function (list) {
  // instantiate variables

  function addToDb(name) {
    var deferred = $q.defer();
    // build url from name

    loadJson(url, function (data) {
      // save to database

      deferred.resolve(data);
    });

    return deferred.promise;
  }

  var promises = [];
  for (var i = 0; i < list.length; i++) {
    promises.push(addToDb(list[i]));
  }

  return $q.all(promises);
}