AngularJSサービスで$ http getからデータを1回だけキャッシュするかキャッシュする

Question

DNNには単純なアプリケーションがあります。以下は私のコードです。 私がしようとしているのは、GET APIを一度呼び出すサービスを作成することです。したがって、入力からの同じデータが2回呼び出されると、サービスは同じAPIを呼び出します。私は、呼び出す関数を見つけるためにinspect要素でnetworkを使用しています。

<script type="text/javascript"> 
    'use strict'; 

    var myApp<%=ModuleId%> = {}; 
    var isDlgOpen; 

    try { 
     myApp<%=ModuleId%> = angular.module('myApp<%=ModuleId%>', ['ngMaterial', 'ngMessages']); 
    } 
    catch (e) { 
     myApp<%=ModuleId%> = angular.module('myApp<%=ModuleId%>', ['ngMaterial', 'ngMessages']); 
    } 

    //Service 
    myApp<%=ModuleId%>.service('myService', ['$http', '$q', function ($q, $http) { 
     this.data; 
     var self = this; 
     this.submit = function() { 
     if (angular.isDefined(self.data)) { 
      return $q.when(self.data) 
     } 
     return $http.get($scope.apiGetUrl).then(function (response) { 
      self.data = response; 
     }) 
    } 
}]); 

//Controller 
myApp<%=ModuleId%>.controller('myCtrlr<%=ModuleId%>', function (myService, $scope, $http, $mdDialog) { 
    $scope.submit = function (ev) { 
    $scope.portalAlias = 'http://<%=PortalSettings.PortalAlias.HTTPAlias %>'; 
    $scope.apiGetUrl = $scope.portalAlias + '/desktopmodules/ORSIModule/api/RepairStatus/getRepair?JobNo=' + $scope.jobNo + '&SerialNo=' + $scope.serialNo; 
    //form is valid 

    if ($scope.myForm.$valid) { 
     $scope.isLoading = true; 
     return $http.get($scope.apiGetUrl).then(
      function (response) { 
       if (response.data) { 
        $scope.myForm.$setSubmitted(); 
        $mdDialog.show(
         $mdDialog.alert() 
         .parent(angular.element(document.querySelector('dnnModule<%=ModuleId%>'))) 
         .clickOutsideToClose(true) 
         .title('title: ' + response.data.status) 
         .textContent('Thank you.') 
         .ariaLabel('Status Alert Dialog') 
         .ok('Close') 
         .targetEvent(ev) 
         .hasBackdrop(false) 
        ); 
       } else { 
        alert("Not found."); 
       } 
      }); 
     } 
    }; 
}); 

// Bootstrap the module 
var appDiv = document.getElementById("dnnModule<%=ModuleId%>"); 
angular.bootstrap(appDiv, ["myApp<%=ModuleId%>"]); 

誰かが感謝

Answer 1

あなただけのGETリクエストでtrueにキャッシュプロパティを設定する必要が私を助けてください：

$http.get(url, { cache: true}).success(...); 

また、あなたが使用することができます。

$http({ cache: true, url: url, method: 'GET'}).success(...); 

もう1つのアプローチは、キャ​​ッシュファクトサービスを使用することです。

var cache = $cacheFactory('myCache'); 

var data = cache.get(someKey); 

if (!data) { 
    $http.get(url).success(function(result) { 
     data = result; 
     cache.put(someKey, data); 
    }); 
}