Question

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

从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 config with resolve，用于检查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。 Model.formStuff是在不同的控制器中动态添加的，并不是预定义的属性......我继承了这段代码，因此不确定为什么会这样处理。

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。

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

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

Answer 1

代码看起来不错。请务必同时处理错误情况，否则您返回的承诺将永远不会被拒绝，路由器将在发生某些错误时永远等待。因此，您应该在错误回调中调用deferred.reject(error)。

如果您不需要对数据进行任何特殊处理，您可以直接返回$http.get()来电的承诺：

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

在您的情况下可能出现的问题是控制器定义。您是否在解析对象中注入了一个名为key的值到控制器中？否则数据将不会传递给那里......

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

另一个建议：不是直接在解析块中处理缓存内容，为什么不创建一个缓存数据的特殊服务，只是像这样解析：

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

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

阻止路由加载，直到Angular

1 个答案: