AngularJS JSON在詳細信息頁面上獲取所有時間

Question

長話短說，我有一個2頁的角度js應用程序（原因是因爲我將它集成到CMS模板中，並且單個頁面應用程序不會工作得太好與側邊欄中的CMS小部件）。

無論如何...我有一個很大的結果頁面，它使用AngularJS 1.5.x工廠和$ q服務來提取3個不同的JSON文件。這全部由控制器控制，稱爲EventsListCtrl。

當你點擊一個項目，它會帶你到另一個單頁面應用程序使用角度的細節頁面（如在介紹中所述）。詳細信息頁面會在URL中拾取x個變量，然後瀏覽正確的JSON文件以提取正確的記錄。這由一個稱爲EventDetailCtrl的單獨控制器控制。

所以它只獲取1個JSON，具體取決於URL中的內容，但是我在日誌中注意到它仍然拉取所有三個JSON文件。我怎樣才能讓它停止拉動所有三個JSON文件。

目標是減少頁面加載速度並停止在JSON文件中拉動我不需要。

我詳細介紹了控制器的例子可以看到下面：

// Event Detail Page 
    function eventDetailCtrl(MyService, $filter){ 
     var vm = this; 

     vm.eventStatus = 'Loading'; 
     vm.eventId = window.location.toString().split('?id=')[1].split('&ref')[0]; 
     vm.noResults = '<h4>Sorry, something went wrong.</h4>The page you requested could not be found.'; 

     activateEventDetail(); 

     function activateEventDetail(){ 
      MyService.getEventData.then(
       function(response){ 
        vm.eventResults = response; 
        vm.eventId = $filter('filter')(vm.eventResults,{Id: vm.eventId})[0]; 
        vm.eventStatus = 'Success'; 
        if(vm.eventId != undefined){ 
         window.document.title = "Network West Midlands - Event: " + vm.eventId.Title; 
        }else{ 
         vm.eventStatus = 'Error'; 
         window.document.title = "Network West Midlands - Event: " + 'Sorry'; 
        } 
       },function(error){ 
        vm.eventStatus = 'Error'; 
        console.log('EventDetail Error: ' + error.statusText); 
       } 
      ); 
     } 
    } 

的爲MyService是我的工廠，使用標準的承諾，技術，如下圖所示：

.factory('MyService',['$http','$q', myService]); 

    function myService($http, $q){ 
     var eventfulData = $http.get('FutureEvents', {cache: 'true'}); 
     var googleData = $http.get('WmPlacesList', {cache: 'true'}); 
     var facebookEvents = $http.get('FacebookNwm', {cache: 'true'}); 

     return { 
      getEventData: getData(eventfulData), 
      getAttractionData: getData(googleData), 
      getfbEvents: getData(facebookEvents) 
     } 

     function getData(jsonData){ 
      /* Just a generic deferred object that we will resolve manually. */ 
      var defer = $q.defer(); 
      $q.when($q.all([jsonData])).then(getDataComplete,getDataFail); 

      return defer.promise; 

      function getDataComplete(response){ 
       var finalData = response[0].data; 
       defer.resolve(finalData); 
      } 

      function getDataFail(response){ 
       defer.reject(response); 
      } 

     } 
    } 

Answer 1

你有幾個問題

return { 
     getEventData: getData(eventfulData),// invokes getData() 
     getAttractionData: getData(googleData), 
     getfbEvents: getData(facebookEvents) 
    } 

這是調用getData不作爲參考傳遞。這就是爲什麼你收到3個請求。

你可以把它寫成

return { 
    getEventData: function() { 
    return getData(eventfulData); 
    }, 
    getAttractionData: function() { 
    return getData(googleData); 
    }, 
    getfbEvents: function() { 
    return getData(facebookEvents); 
    } 
} 

沒有必要在getData()使用$q因爲$http已經返回一個承諾。它可以streamined成是這樣的：在控制器

function getData(jsonData) { 
    return jsonData.then(getDataComplete) 
       .catch(getDataFail);  
} 

function getDataComplete(response) { 
    return response.data; 
} 

function getDataFail(response) { 
    // not sure what you want to do for errors 
} 

現在你需要調用MyService.getEventData

因此改變：

MyService.getEventData.then(

要

MyService.getEventData().then(