Angularjs 如何使用Angular服务跨控制器/页面共享数据？

我正在创建一个“Web Planner”，用户必须在不同的页面上完成许多步骤，才能为我们的服务创建订单。我知道我需要使用一项服务，以便在整个Planner中共享某些数据，但我仍然不确定该如何进行

问题是用户不一定每次都按顺序去做。他们可以在任何页面上停止，然后稍后返回并继续，因此我需要一种方法来管理一些API数据，这样，如果用户位于共享相同数据的2个页面中的1个页面上，那么数据将通过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;
        }
    }


})

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);
});

---

有人有其他想法吗？

无论数据已经存在，还是通过调用服务器获取，只要始终返回承诺即可。在你的例子中

   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;
    }

---

因为您的调用是异步的，所以实现这一点的唯一方法是通过承诺

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
    }
})

---

请记住，我还是一个初学者（阅读了大量文档），所以这可能不是100%正确

您的服务应该是这样的：

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;
        }
    }


})

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);
});

然后在控制器上，您只需像这样使用它：

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;
        }
    }


})

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);
});

---

这真的是一件没有人知道该怎么做的不寻常的事情吗？哦，哇，我没有想到使用deferred.resolve（）来解析已经存在的订单。这应该管用！我要试一试。谢谢