如何使用Angular服務在控制器/頁面之間共享數據？

Question

我正在創建一個「Web Planner」，用戶必須在不同頁面上完成若干步驟才能創建我們的服務訂單。我知道我需要使用服務來共享整個Planner的某些數據，但我仍然不確定如何去做。

問題是，用戶不一定每次都按順序進行。他們可以在任何頁面上停止，然後再回來並恢復，因此我需要一種方法來管理一些API數據，以便如果用戶在共享相同數據的兩頁中的一頁上，數據將通過API從服務器獲取或者如果數據已被採用，則簡單分配。

現在我唯一想到的方法是將API請求放入我的服務中，然後當我運行諸如OrderService.get()之類的服務時，服務將處理邏輯以檢查數據是否已從服務器獲取。如果是的話，它只是一個簡單的任務，如$scope.model = OrderService.get()，但問題是，如果數據尚未加載，那麼我需要在某處等待數據，因此一個簡單的賦值操作不會足夠了。

此服務可能是這個樣子：

app.factory('OrderService', function(){ 
    var orders = []; // This is the actual data 

    var service = {}; 

    service.get = function(id){ 
     if(orders.length){ 
      return orders; // This means there is already data available 
     }else{ 
      // This is where I am not sure what to do... 
      // Maybe... 
      var promise = API.Orders.getAllOrders({id : id}, function(res){ 
        // Not sure about how to implement this part 
      }).$promise; 

      return promise; 
     } 
    } 


}) 

沒有人有任何其他的想法？

Answer 1

由於您的調用是異步的，要做到這一點的唯一方法是通過承諾

app.service('OrderService', function($q){ // import $q ; the angularjs promise 

    var orders = []; // This is the actual data 

    var service = {}; 

    service.get = function(id){ 
     var deferred = $q.defer(); // create a unit of work to be done; a promise 

     if(orders.length){ // if data is already available, resolve the promise 
      deferred.resolve(orders); // This means there is already data available, so mark as resolved and successful 
     }else{ 
      // make your async call since you don't have data 
      API.Orders.getAllOrders({id : id}, function(response){ 
       // here you can actually modify the response before it goes back to your controller 
       deferred.resolve(response); 
      }, function(reason){ // failure scenario 
       deferred.reject(reason); 
      }) 

     } 
     return deferred.promise; // always return promise 
    } 
}) 

Answer 2

只要一直返回一個承諾，數據是否已經存在，或通過調用服務器獲取。在您的例子..

if(orders.length){ 
     return $q.when(orders); // This means there is already data available 
    }else{ 
     // This is where I am not sure what to do... 
     // Maybe... 
     var promise = API.Orders.getAllOrders({id : id}, function(res){ 
       // Not sure about how to implement this part 
     }).$promise; 

     return promise; 
    } 

Answer 3

請記住，我還是個初學者（通過大量閱讀的文檔），所以這可能不是100％正確的。

您的服務將是這樣的：

app.factory('OrderService', function($q){ 
    var orders = []; // This is the actual data 

    return { 
     getData: function(id){ 
     var deferred = $q.defer(); 

     if(orders.length){ 
      deferred.resolve(orders); // This means there is already data available 
     }else{ 
      $http.get('/api/get/data/' + id) 
       .success(function(data) { 
        deferred.resolve(data); 
       }) 
       .error(function(){ 
        deferred.reject(); 
       }); 
     } 

     return deferred.promise; 
    } 
}) 

，然後在你的控制器，你只需要使用它像這樣：

app.controller('MainCtrl', function($scope, OrderService) { 
    var id = 1; 
    $scope.data = OrderService.getData(id); 
});