javascript - ui-router，如何解析本地结果，然后解析远程结果

Question

我有这种感觉，仅仅靠简单的决心是不可能做我想做的事的。

基本上，我需要一种在 ui-router 路由中解析属性的方法，然后稍后更新该属性或让它解析两次。

例如，您有一个帖子页面，它将从缓存加载帖子，显示页面，然后向远程服务器发送请求(可能会成功，也可能不会成功)并更新已解析的属性有了新的信息。

有人知道处理这个问题的最佳方法吗？

Answer 1

以下是使用自定义 localStorage 和充当 DAL 的 dataService 的解决方案的基本示例。您可以告诉它使用缓存数据或获取“新鲜数据”(您可以在其中访问 API)，然后将该数据返回到 Controller 进行渲染。这是它的基本实现，并不意味着成为您的完整解决方案，而是让您走上正确的轨道，完成您想做的事情。

angular.module('app.factories', [])
  .factory('localStorage', function() {
    var dummyData = [{
      'id': 1,
      'someProperty': 1,
      'someOtherProperty': 2
    }, {
      'id': 2,
      'someProperty': 3,
      'someOtherProperty': 4
    }];

    return {
      supported: function() {
        return true; // SO restriction won't let me use localStorage, fair enough, just mock it
        //return 'localStorage' in window && window['localStorage'] !== null;
      },
      get: function(key) {
        return dummyData;
        //return localStorage[key];
      },
      set: function(key, value) {
        //localStorage[key] = value;
      }
    }
  })
  .factory('dataService', ['$http', '$q', 'localStorage',
    function($http, $q, local) {
      return {
        get: function(useCached) {
          var cachedData = local.supported() && useCached ? local.get('data') : undefined;

          var dummyData = [{
            'id': 1,
            'someProperty': 1,
            'someOtherProperty': 2
          }, {
            'id': 2,
            'someProperty': 3,
            'someOtherProperty': 4
          }];

          var deferred = $q.defer(),
            promise = deferred.promise;

          if (cachedData) {
            console.log('using cachedData in get()');
            deferred.resolve(cachedData);
          } else {
            console.log('getting fresh data in get()');
            local.set('data', dummyData);
            deferred.resolve(dummyData);
          }

          return promise;
        },
        getById: function(id, useCached) {
          var cachedData = local.supported() && useCached ? local.get('data' + id) : undefined;

          var dummyForId1 = {
              'id': 1,
              'someProperty': 5,
              'someOtherProperty': 6
            },
            dummyForId2 = {
              'id': 2,
              'someProperty': 7,
              'someOtherProperty': 8
            };

          var deferred = $q.defer(),
            promise = deferred.promise;

          if (cachedData) {
            console.log('using cachedData in getById()');
            deferred.resolve(cachedData);
          } else {
            console.log('getting fresh data in getById(' + id + ')');
            if (id === 1) {
              local.set('data1', dummyForId1);
              deferred.resolve(dummyForId1);
            } else if (id === 2) {
              local.set('data2', dummyForId2);
              deferred.resolve(dummyForId2);
            }
          }

          return promise;
        }
      }
    }
  ]);

angular.module('app', ['ngRoute', 'app.factories'])
  .config(['$routeProvider',
    function($routeProvider) {
      $routeProvider.when('/', {
        controller: 'homeCtrl',
        template: '<span>This is the home page</span><br /><div ng-repeat="item in data">{{item.someProperty}}, {{item.someOtherProperty}} <button ng-click="refreshMe(item)">Refresh Me!</button></div>',
        resolve: {
          data: ['dataService',
            function(dataService) {
              return dataService.get(true).then(function(response) {
                return response;
              });
            }
          ]
        }
      });
    }
  ])
  .controller('homeCtrl', ['$scope', 'dataService', 'data',
    function($scope, dataService, data) {
      console.log('in homeCtrl');
      $scope.data = data;

      $scope.refreshMe = function(item) {
        console.log(item)
        dataService.getById(item.id).then(function(response) {
          console.log(response);
          item.someProperty = response.someProperty;
          item.someOtherProperty = response.someOtherProperty;
        });
      }
    }
  ]);

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <dib ng-view>
    </div>
</body>

</html>