コントローラーの代わりにサービスでjsonをフェッチする

Question

現在、私のproductdetailコントローラーで使用しているサービスでデータjsonをフェッチすることは可能ですか？第二に、私は製品リストページを開くとき、それはjsonを要求する。商品の詳細ページに行くとjsonを再度リクエストします。私はそれが1回のみを要求する必要があると思った。それは、なぜ私は同じjsonを何度も要求しなければならないのです。 jsonに一度だけリクエストする方法はありますか？

services.js

.factory('Product', ['$http', function($http){ 
     return{ 
      get: function(callback){ 
       return $http.get('https://raw.githubusercontent.com/vicariosinaga/learn/master/products.json').then(function(response){ 
        return response.data; 
       }); 
      } 
     }; 
    }]) 

productctrl

angular 
    .module('app') 
    .controller('productCtrl',['$scope', 'Product', function($scope,Product) { 
     $scope.title="List Product"; 
     Product.get().then(function(data) { 
      $scope.products = data; 
     }); 
    }]); 

productdetailctrl

.controller('productDetailsCtrl',['$scope','$stateParams', 'Product', function($scope,$stateParams,Product){ 
     $scope.id=$stateParams.id; 
     Product.get().then(function(data) { 
      $scope.singleItem = data.filter(function(entry){ 
       return entry.id === $scope.id; 
      })[0]; 
      // console.log($scope.singleItem); 
      // console.log($stateParams); 
     });  
}]); 

Answer 1

キャッシュフェッチ後JSON。キャッシュされている場合は、キャッシュからリターンします。

.factory('Product', ['$http', function($http,$q){ 
    var service = {}; 
    service.get: function(callback){ 
     if(service.productJSON){ 
      return $q(function(resolve,reject){ 
       resolve(service.productJSON); 
      }) 
     } 
     else{ 
      return $http.get('https://raw.githubusercontent.com/vicariosinaga/learn/master/products.json').then(function(response){ 
       service.productJSON = 
       return response.data; 
      }); 
     } 
     } 
    return service; 

}])