Simply put, I have developed a 2-page AngularJS application because I am integrating it into CMS templates and a single page app would not work well with the CMS widgets in the sidebar.
On my results page, I am pulling data from 3 different JSON files using AngularJS 1.5.x factory and $q services, all managed by a controller named EventsListCtrl.
Clicking on an item takes users to a details page which is another single page app utilizing AngularJS. The details page extracts variables from the URL to retrieve specific data from the appropriate JSON file, controlled by a different controller called EventDetailCtrl.
Despite needing only one JSON file based on the URL parameters, I observed that all three JSON files are being pulled. How can I prevent unnecessary requests for additional JSON files?
The goal here is to enhance page load speeds by stopping the retrieval of unrequired JSON files.
An excerpt from my detailed controller is provided below:
// 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 is a factory utilizing standard promise techniques as shown below:
.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);
}
}
}