I have a series of JSON files (page1.json, page2.json, etc.) that store the layout details for our website pages.
Initially, I would load each page's data as needed and everything was functioning smoothly. However, it is now necessary for all page data to be loaded when the Angular app initializes - with each page in its own file (to satisfy the designers).
This is what I've been attempting:
var app = angular.module("templatesApp", ['bulletComponent', 'popupComponent', 'imageComponent', 'paragraphComponent', 'ngRoute']);
var numberOfPages = 0;
var pageData = [];
var pageIndex = 0;
/*Factory that uses http.get on content.json, utilized by multiple controllers */
app.factory('content', ['$http', 'completions', 'pages', function($http, completions, pages) {
var url = 'json/content.json';
return $http.get(url)
.success(function(data) {
// loop through pages and add corresponding page objects to completions.js service
for (var i=0; i<data.length; i++) {
completions.addPage(data[i].title);
numberOfPages += 1;
}
loadPageData(pages, completions);
return data;
})
.error(function(data) {
return data;
});
}]);
var loadPageData = function(pages, completions) {
console.log("loadPageData called when pageIndex = "+pageIndex);
pages.success(function(loadedData) {
pageData.push(loadedData);
completions.addPageComponents(pageIndex + 1, pageData[pageData.length-1]);
pageIndex += 1;
if (pageIndex < numberOfPages) {
loadPageData(pages, completions);
}
});
}
app.factory('pages', ['$http', function($http) {
console.log("pages factory called with pageIndex = "+pageIndex);
var url = 'json/page'+ (pageIndex + 1) +'.json';
return $http.get(url)
.success(function(loadedData) {
return loadedData;
})
.error(function(loadedData) {
return loadedData;
});
}]);
/*Controller for menu, retrieves data from factory*/
app.controller('menuCtrl', ['$scope', '$http', 'content', function($scope, $http, content) {
content.success(function(data) {
$scope.pages = data;
});
}]);
/*Controller for individual pages. Makes XHR requests to json pages for data.
Contains function for computing column widths*/
app.controller('pageCtrl', ['$scope', '$routeParams', '$http', 'content', 'completions', function($scope, $routeParams, $http, content, completions) {
$scope.page = pageData[$routeParams.pageId-1];
$scope.getStyle = function(singleCase, device) {
if (singleCase == undefined)
return '';
return assignBootstrap(singleCase, device);
}
$scope.pageId = $routeParams.pageId;
}]);
As you can see, the 'content' factory is invoked by 'menuCtrl'. It first loads the content.json file (a list of the page titles), then it triggers 'loadPageData', a recursive function designed to call the 'pages' factory for each required page as it loads.
The issue arises when the console logs reveal that the 'pages' factory is called only once and PRIOR to the execution of the loadPageData function. Subsequently, each HTML page receives the same initial set of data.
I suspect I am not utilizing the 'pages' factory correctly, but I am unsure about the correct approach.
If anyone has any insights or suggestions, I would greatly appreciate hearing them.
UPDATE
Thank you for the feedback. I believe what I need to figure out is: How can I establish a dynamic chain of promises (using $http calls)? The number of pages will vary, so hard-coding them is not possible.