Question

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

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

问题是我开始使用'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

控制器接受resolve参数，该参数允许您将依赖项注入控制器，这些控制器可以是原始对象或承诺，它会阻止控制器的实例化，直到它被解析：

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

需要修改load和addToDb函数以返回promises：

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

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

1 个答案: