javascript - 在数据在 Angular 中可用之前阻止路由加载

Question

在我正在处理的应用程序中，有一种情况是从 JSON 文件中提取数据并在所有后续路由中引用。我想确保在该数据可用之前不会加载路由，如果不可用，请在加载路由之前请求它。我正在尝试使用路由解析来完成此操作，但我发现该路由无论如何都会加载，因为获取数据的请求会在解析中返回 promise 。这是一个如何设置此代码的示例，有没有办法在解决 promise 之前不加载路由？我认为使用 promises 让我有些失望。

从 JSON 文件中提取数据的工厂。

    .factory('jsonFactory', function($q, $http) {
        return {
            getFormStuff: function() {
                var deferred = $q.defer(),
                    httpPromise = $http.get('json/MasterObject.json');

                httpPromise.then(function(response) {
                    deferred.resolve(response);
                }, function(error) {
                    console.log(error);
                });

                return deferred.promise;
            }
        };
    }) 

带有解析的 ngRoute 配置检查 Model.formStuff 是否可用，如果不可用，则在加载需要数据的路由之前尝试获取它。

app.config(function ($routeProvider) {
    $routeProvider.when('/someRoute', {
        controller: 'someController',
        templateUrl: 'views/someView.html',
        resolve: {
          getFormTemplate: function (Model, jsonFactory) {
            if (!Model.formStuff) {
                Model.formStuff = jsonFactory.getFormStuff();
                return Model.formStuff;
            } else {
                return Model.formStuff;
            }
        } 
    }
 })

编辑:在引用 Model.formStuff 的地方添加模型工厂和 Controller 。 Model.formStuff 是在不同的 Controller 中动态添加的，不是预定义的属性...我继承了这段代码，所以不确定为什么要这样处理。

angular.module('example', [])
    .factory('Model', ['$resource',
        function($resource) {
            return {
                query: function() {
                    return data;
                },
                get: function(id) {
                    return findById(id);
                },
                set: function(item) {
                    addItem(item);
                },
                put: function(item) {
                    updateItem(item);
                },
                del: function(id) {
                    removeItem(id);
                },
                getLoginUser: function(id) {
                    removeItem(id);
                },
                islogin: false
            };
        }
    ])

显示 Model.formStuff 通常如何使用的基本 Controller 示例。

angular.module(...)
  .controller("someController", function(Model) {        
    $scope.someField = Model.formStuff[0].someProp;
    var someVar = Model.formStuff.[0].otherProp;

    // bunch of other code...
  });

Answer 1

代码看起来并没有那么错。请务必同时处理错误情况，否则您返回的 promise 将永远不会被拒绝，并且路由器将永远等待以防出现某些错误。因此，您应该在错误回调中调用 deferred.reject(error)。

如果您不需要对数据进行任何特殊处理，您可以直接返回 $http.get() 调用的 promise ，如下所示:

getFormStuff = function() { 
  return $http.get('json/MasterObject.json');
}

您的情况可能是 Controller 定义的问题。您是否将一个名为 key 的值注入(inject)到 Controller 中 resolve 对象中？否则数据不会传递到那里...

angular.module(...)
  .controller("someController", function(getFormTemplate) {
    // do anything with the resolved data...
  });

另一个建议:与其直接在解析 block 中处理缓存内容，不如创建一个缓存数据的特殊服务并像这样解析:

resolve: {
  getFormTemplate: function (MyCachingModel) {
    return MyCachingModel.promiseToTemplate()
  }
}

... 然后将当前逻辑移动到此缓存服务中。这使得推理更加清晰，因为您的逻辑没有传播到路由器配置中。