Currently, I am facing an issue with the implementation of angularjs ui-router for state transitions along with a loader assigned to each view. The problem arises when moving from one state to another and the loader disappears before all the content from the web service is loaded and other get requests are completed. This is my first attempt at using angularjs's ui-router.
In an effort to resolve this issue, I have experimented with different methods:
app.run(function($rootScope,$cookies){
// Triggered when the transition begins
$rootScope.$on('$stateChangeStart',function(e, toState, toParams, fromState, fromParams){
$rootScope.loading = true;
});
// Triggered once the state transition is complete
$rootScope.$on('$stateChangeSuccess',function(e, toState, toParams, fromState, fromParams){
$rootScope.loading = false;
});
});
I also attempted to use the resolve method like so:
...
.state('loan-new',{
url: '/loan-new/:id',
templateUrl: BASE_URL+'js/pages/loan-new.html',
controller: 'LoanController',
resolve: {
loanNew: function($q, client, $stateParams, $http) {
var defer = $q.defer();
if(client.getAllInformation($stateParams.id) !== undefined)
{
$http.get(BASE_URL+'client-loan-types').success(function(data) {
})
.then(function(){
client.getAllInformation($stateParams.id).then(function(data) {
defer.resolve(data);
console.log('APP DATA');
console.log(data);
});
});
}
else
{
defer.reject(data);
}
return defer.promise;
}
}
})
...
Lastly, I tried the following code without success:
app.controller('LoadingController', ['$scope', '$http', '$rootScope', '$stateParams', 'client', '$q', function($scope, $http, $rootScope, $stateParams, client, $q) {
$rootScope.loading = true;
$scope.$on('$viewContentLoading', function(event, viewConfig){
console.log('content loading: ', event, viewConfig)
return client.getAllInformation($stateParams.id);
});
$scope.$on('$viewContentLoaded', function(event) {
$rootScope.loading = false;
console.log('loaded loaded loaded');
});
}]);
HTML
<!-- CSS Loader -->
<div id="overlay" ng-show="loading">
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>
<p>Loading...</p>
</div>
<div class="content-wrapper ng-cloak" ng-controller="LoadingController">
<div class="container wrap-content ng-cloak" ui-view>
</div>
</div>
Service
app.factory('client', ['$http','$q',function($http,$q){
var client = {};//empty oject that will store multiple functions
...
//get all of the client's personal information
client.getAllInformation = function(ucin){
var deferred = $q.defer(); //create promise to be completed for getting a client's information
$http.get(LOSAPI+ucin).success(function(data){
deferred.resolve(data.data); //when success resolve the promise by accepting the data from the web serivces
}).error(function(){
return deferred.reject(); //promise was not completed for some reason
});
return deferred.promise; //return the promise
};
return client
}]);
...
If anyone can provide some guidance on how to tackle this issue effectively, it would be highly appreciated. Thank you.