Angular Resolve on Application Reload

How do I delay initialization of my Application Controller (a la the 'resolve' attribute in the router) on a page reload? Or perhaps the better question, how do I delay the view till my controller has retrieved the user object, specifically on page reloads?

I currently have this at the top of my ApplicationCtrl

if (localStorage.getItem('token') && localStorage.getItem('token') != 'null')
{
    sessionStorage.setItem('token', localStorage.getItem('token'))
}
if (sessionStorage.getItem('token') && sessionStorage.getItem('token') != 'null')
{
    UserSvc.getUser()
    .then(function (response) 
    {
        loadUser(response.data)
    })
    .then(function (error)
    {
        if (error) $scope.logout()
    })
}

This checks for an auth token, and then gets the user object from the database using that token.

But the problem is the user data stutters in after the page has appeared, so that our nav-bar is empty before the user's display name suddenly appears a few milliseconds afterward.

How can I delay the display of this view till the initial user request has completed?

Answers


Figured it out. I just created a top level $scope boolean $scope.initResolved which is rendered true by a completion of that first user check (whether it retrieves a user or not) and set the header and ng-view to ng-if="initResolved"

$scope.initResolved = false

    if (localStorage.getItem('token') && localStorage.getItem('token') != 'null')
    {
        sessionStorage.setItem('token', localStorage.getItem('token'))
    }
    if (sessionStorage.getItem('token') && sessionStorage.getItem('token') != 'null')
    {
        UserSvc.getUser()
        .then(function (response) 
        {
            loadUser(response.data)
            $scope.initResolved = true
        })
        .then(function (error)
        {
            if (error) $scope.logout()
            $scope.initResolved = true
        })
    }
    else if ($location.url() == "")
    {
        $location.path('/welcome')
        $scope.initResolved = true
    }
    else $scope.initResolved = true

This would then should be putted in resolve of you state, the customService will return UserStatus that will contain promise object. Then in you could add this service to your controller, and controller will wait till this dependence get resolved.

resolve: function() {
    'UserStatus': function(UserSvc) {
        if (localStorage.getItem('token') && localStorage.getItem('token') != 'null') {
            sessionStorage.setItem('token', localStorage.getItem('token'))
        }
        if (sessionStorage.getItem('token') && sessionStorage.getItem('token') != 'null') {
            return UserSvc.getUser();
        }
    }
}

Controller

app.controller('myCtrl', function(UserStatus, $scope){
   UserStatus.then(function(data){
      //you will get response here
   })
})

Need Your Help

Zoom background image on hover

javascript jquery html css twitter-bootstrap-3

I have a background image for a div that i want to zoom in when i hover , this is the code i am using

phpmailer - The following SMTP Error: Data not accepted

php email smtp phpmailer

I'm trying to figure out this issue for 6 hours. But there is nothing to make sense. Here is the scenario; There is a well formatted HTML template.