So I have searched for multiple results online through StackOverflow and haven't really found the answer I am looking for. I am trying put together my main UI page with my AngularJS controller. What I want to accomplish is sort of a Synchronous call that will load all the user data from multiple queries as well as data driven nodes before the main UI page is actually completely loaded. Some of these queries take 2-3 seconds and I need them to finish before the user starts playing/seeing the UI.
Basically what I want to do is the following: 1) Person navigates to home page 2) User Data is Loaded 3) User Data drives data driven UI design 4) Fill out UI with ng-bind values 5) UI now finishing loading for the user to see
Note I am fine with a loading screen, don't really have
Small Example: http://plnkr.co/edit/9W8wZX8PhrSzv7KE8IEt
<!DOCTYPE html>
<html ng-app="myApp" ng-controller="myCtrl">
<head>
</head>
<body>
<p><u>Username:</u></p>
<p ng-bind="username"></p>
<p><u>Completed in Order:</u></p>
<p ng-repeat="order in list">{{order}}</p>
<p><u>Projects:</u></p>
<p ng-repeat="data in datas">{{data}}</p>
<script data-require="angular.js@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
<script src="script.js"></script>
</body>
</html>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, myService) {
$scope.list = [];
console.log('1 - Started Loading myCtrl');
$scope.list.push('1 - Started Loading myCtrl')
myService.getProjects().then(function(response){
//console.log(response);
$scope.datas = response.Result;
$scope.list.push('2 - getProjects Complete');
});
myService.getUsername().then(function(response){
//console.log(response);
$scope.username = response.Result;
$scope.list.push('3 - getUsername Complete');
});
//I don't want this to run until all the data is loaded
$scope.list.push('4 - Finished Loading myCtrl');
});
app.factory('myService', function($http) {
return{
getProjects : getProjects,
getUsername : getUsername
}
function getProjects(){
return $http.get('project.txt')
.then(getProjectsComplete)
.catch(getProjectsFailed);
function getProjectsComplete(response) {
return response.data;
}
function getProjectsFailed(error) {
console.log('XHR Failed for getProjectsFailed.' + error.data);
}
}
function getUsername(){
return $http.get('username.txt')
.then(getUsernameComplete)
.catch(getUsernameFailed);
function getUsernameComplete(response) {
return response.data;
}
function getUsernameFailed(error) {
console.log('XHR Failed for getUsernameFailed.' + error.data);
}
}
});
My Sample Files: project.txt
{
"Completed": true,
"Status": true,
"ExceptionType": "",
"ExceptionMessage": "",
"StartTime": "2016-12-16T14:19:17.7066714-05:00",
"EndTime": "2016-12-16T14:19:20.7486909-05:00",
"Result": [
"Project1",
"Project2",
"Project3",
"Project4"
]
}
Sample File: username.txt
{
"Completed": true,
"Status": true,
"ExceptionType": "",
"ExceptionMessage": "",
"StartTime": "2016-12-16T14:30:53.354957-05:00",
"EndTime": "2016-12-16T14:30:53.354957-05:00",
"Result": "IamBillyBob"
}
The UI Shows like this:
Username: IamBillyBob
Completed in Order:
- 1 - Started Loading myCtrl
- 4 - Finished Loading myCtrl
- 3 - getUsername Complete
- 2 - getProjects Complete
Projects:
- Project1
- Project2
- Project3
- Project4
I want it to change to this and always load in this order 100% of the time:
Completed in Order:
- 1 - Started Loading myCtrl
- 2 - getProjects Complete
- 3 - getUsername Complete
- 4 - Finished Loading myCtrl
