AngularJS：在 $http 调用后访问工厂中存储的数据

Question

我正在尝试构建一个工厂来充当我的数据库模型的暂存区，以及一个用于执行基本 CRUD 调用的 api。我希望能够通过将数据存储在服务或工厂中来访问数据，并保留 api 方法，以便我可以在控制器中执行类似的操作。

$scope.folders =  Folders.data(); // for a factory
$scope.folders = Folders.data; // for a Service

Folders.create({name: "My Stuff, $oid: { 5fwewe033333 }, user_id: CurrentUser.id"});

目前我在控制器中使用这样的文件夹工厂。

Folders.foldersData().success( function(data, status) {
   $scope.folder = data;
})
.error( function(data,status) {
   Flash.warning("There was a problem fetching your data");
});

我知道我可以在控制器中解决一个承诺，但是鉴于我正在处理的项目的大小，我喜欢在服务中访问文件夹模型的想法，而不必进行服务器调用每次我进行更改时同步数据。

angular.module('cmsApp')
  .factory('Folders', function($http, $q){

    var folders = {};
    var messageWarn = "Upload Retrival Failed.";


    return {
      get: function(){
        var defered = $q.defer();

        $http.get('/folders').success( function ( data, status ) {
          defered.resolve(data);
        })
        .error( function ( data, status ) {
          defered.reject();
          Flash.warning(message_warn);
        });
        defered.promise.then( function (promise)
          folders = promise;
        });
      }, 
      data: function (){
      return folders;
    },
  }               
});

我的问题是我无法在调用 Folders.get() 后保留文件夹对象。在我将 Folders.data() 作为空对象调用后，它总是会回来。

有没有办法将这些数据保存在工厂中，作为文件夹模型的最新表示，而不依赖于每次都访问服务器？

在 Rails 4 API 上运行 Angular 1.2.3。

Answer 1

在本例中，服务本质上是IS数据。第一次注入服务时，会创建一个 Promise，然后调用就会结束。该服务实际上是该数据的承诺，但是当调用返回时，该承诺与数据一起解决。因此，在第二次、第三次等注入服务时，不再进行调用 - 工厂已经完成了它的工作并返回了服务（本例中的承诺）。

Live demo (click).

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, myService) {
  myService.then(function(data) {
    $scope.data = data
  })
});

app.factory('myService', function($http, $q) {
  //this runs the first time the service is injected
  //this creates the service

  var promise = $http.get('my-file.json').then(function(resp) {
    return resp.data;
  });

  return promise;

});

这是一个 expanded demo，我在其中使用了两次数据。请注意控制台日志 - 调用只进行一次。在这个演示中，我使用返回承诺的get 方法将服务变成了一个对象。我只是想演示另一种实现这种技术的方式。

app.factory('myService', function($http, $q) {

  console.log('Making the call!');
  var promise = $http.get('my-file.json').then(function(resp) {
    return resp.data;
  });

  var myService = {
    get: function() {
      return promise;
    }
  };

  return myService;
});

Answer 2

您可以将承诺作为服务上的对象存储在服务中。我 fork 上面的扩展演示来演示 http://plnkr.co/edit/2HqQAiD33myyfVP4DWg3?p=preview

与前面的示例一样，http 调用只进行一次，但这次 Promise 被添加到由工厂创建的服务对象上的文件夹项中。

app.factory('myService', function($http, $q) {

  return {

    myObject: '',

    get: function() {
      // Create the deffered object
      var deferred = $q.defer();

      if(!this.myObject) {
        // Request has not been made, so make it
        $http.get('my-file.json').then(function(resp) {
          console.log('Making the call!');
          deferred.resolve(resp.data);
        });
        // Add the promise to myObject
        this.myObject = deferred.promise;
      }
      // Return the myObject stored on the service
      return this.myObject;

    }

  };

});