Here is the HTML code I am working with :
<div class="container-fluid">
<div class="jumbotron" id="welcomehead">
<br><br><br><br><br><br><br><br><br><br>
</div>
<div class="row">
<div class="col-md-12">
<h2>Welcome {{username }}, your Season total is {{total }}</h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 id="slogan" >5 teams; 1 Goal</h3><br>
<img src="http://res.cloudinary.com/deji/image/upload/v1508887997/ymkit_ww8np1.jpg">
<img src="http://res.cloudinary.com/deji/image/upload/v1508888352/indkit_zop1gx.jpg">
<img src="http://res.cloudinary.com/deji/image/upload/v1508887290/chad2kit_fa3lrh.jpg">
<img src="http://res.cloudinary.com/deji/image/upload/v1508887718/fbg2kit_lzndap.jpg">
<img src="http://res.cloudinary.com/deji/image/upload/v1508888206/vgc_kit_hvpdz4.jpg">
</div>
</div>
Now, let's take a look at the JavaScript code associated with this HTML:
'use strict';
angular.module('TNF.welcome', ['ngRoute', 'firebase'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/welcome',{
templateUrl:'welcome/welcome.html',
controller: 'WelcomeCtrl'
});
}])
.controller('WelcomeCtrl',['$scope','$firebaseAuth','CommonProp','$location','DatabaseService',
function($scope,$firebaseAuth, CommonProp,$location, databaseService){
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
databaseService.users.child(user.uid).once('value', function(usersSnapshot){
var users = usersSnapshot.val();
var total = users.total;
$scope.username = user.email;
$scope.total = total;
}, function(err) {
console.log(err);
$scope.total = 0;
});
} else {
// No user is signed in.
$location.path('/home');
}
});
$scope.logout = function(){
firebase.auth().signOut().then(function() {
console.log('Signed Out');
$location.path('/home');
}, function(error) {
console.error('Sign Out Error', error);
});
};
The Challenge:
I am facing an issue where the values of {{username}} and {{total}}, which are results of the Firebase query, do not display on the view immediately upon page load. Strangely, they only appear after navigating away from the page and then returning to it. Do you think the HTML code loads faster than the Firebase query can be resolved? If so, is there a way to ensure that the page loads ONLY AFTER the Firebase query has been resolved?