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(