Question

我对角度很新，但是，我得到了它......

使用某些ui-route状态，我可以使用用户选择的数据逐步构建的URL（视图）。它类似于向导界面。步骤1 =＆gt;步骤2 =＆gt;步骤3 =＆gt;最终结果

从开始到结束都没有太多问题，因为当用户点击时数据会保存在服务中。页面刷新或直接输入浏览器（即有人给我发送链接）时出现问题 / step-1 / step-2应显示与用户选择步骤1和步骤2

相同的数据

在这种情况下，我需要获得所有用户选择的数据。获取步骤1的数据，加载数据时，获取步骤2的数据，然后获取步骤3的数据等。但是，如果尚未检索数据，我只需要获取数据。

要实现这样的想法，我需要服务来返回存储在其数据属性中的数据，或者如果该数据为空，则获取它，将其保存到其属性然后将其返回。

关于如何实现这一点的任何想法？

这是一些伪代码，说明了我在服务中尝试做的事情。我不确定语法是100％正确但它应该说明一点。

    app.factory('dataService', ['$http', '$q', '$filter', 'ngAuthSettings', 'localStorageService', function ($http, $q, $filter, ngAuthSettings, localStorageService) {


    var ServiceFactory = {};
    var _getData = function () {

        var deferred = $q.defer();
        _Step1Data= localStorageService.get('Step1Data');

        if (_Step1Data) {
            $http.get('api/Step1Data').then(function (response) {
                _data = response.data.results;
                localStorageService.set('Step1Data', _Step1Data);
                deferred.resolve(response);
            });
        }
        else {
            deferred.resolve(_Step1Data);
        }
        return deferred.promise;
    };
    ServiceFactory.getStep1Data = _getStep1Data;
 return ServiceFactory;

}]);

假设获得第2步，第3步数据的过程与步骤1相同，则加载数据的调用如下：

dataService.getStep1Data ()
            .then(function (data) {
                vm.Step1Data = data;
                dataService.getStep2Data ()
                .then(function (data) {
                    vm.Step2Data = data;                    
                }, function (error) {
                    //some error stuff
                })
            }, function (error) {
                //some error stuff
            });

分步方法的原因是每一步都取决于前面步骤选择的数据来获取当前步骤数据。

Answer 1

您正在寻找的resolve property。您可以在实例化任何步骤控制器之前使用它来解析步骤数据。然后可以在控制器中注入已解析的步骤数据。

您可以将其与数据服务结合使用，如下所示：

step1.state({ 
  resolve: {
    step1Data: function(dataService) {
      return dataService.getStep1Data () 
    }
  }
  ....
}

如何按顺序加载角度应用加载数据

1 个答案: