CODEWITHSUNDEEP
javascriptangularjs
Matoy
Matoy

Reputation: 1808

Raw presentation of angular js page

I've created a single page application done in AngularJs.

when I navigate to the main page of my application (on heroku server), for a split second I see all the pictures and text in a raw state in the top left side of the browser like so:

enter image description here

after that the application is uploading correctly like so:

enter image description here

this is pretty ugly so I want to put a spinner of loading until the app is loaded.

now - here is my question - what causing this delay and raw presentation of the elements is: 1. the page controller? or 2. the loading of the entire app by the $routeProvider? I am reminding you that this is a single page app meaning all the data should load in advance.

I am asking because I tried to control the state of the app using variable inside of my run of the route provider and it didn't help:

    $routeProvider
    .when('/', {
      templateUrl : 'components/login/loginView.html',
      controller  : 'loginController'
    }) 
    .when('/chat', {
      templateUrl : 'components/chat/chatView.html',
      controller  : 'chatController'
    });
  }).run(function ($rootScope) {

    // App is loading, so set isAppLoading to true and start a timer
    console.log($rootScope);
    $rootScope.isAppLoading = true;

  });;

so my idea is that option 1 is correct. the what causing the problem is the controler of the page the routeProvider trying to present, and not the routeProvider loading time itself...

is that true?

hope I've managed to explaining the problem...

Thanks

Upvotes: 2

Views: 34

Answers (1)

Adnan Umer
Adnan Umer

Reputation: 3689

You can show loader until page is loading and hide other content while loading.

Put this css in head

body.loading > * {
   display: none;
}

body.loading > .loader {
   display: block !important;
}

body > .loader {
    display: none !important;
}

And add a class to body tag by default

<body class="loading" ..>
   <div class="loader">Loader Goes Here</div>
   <!-- Rest of your HTML content goes here -->
</body>

And you can then listen to state change events on $rootScope. Something like this.

app.run(function ($rootScope) {

    $rootScope.$on('$stateChangeSuccess', function() {
       $('body').removeClass('loading');
    });

    $rootScope.$on('$stateChangeStart', function() {
       $('body').addClass('loading');
    });
});

Upvotes: 2

Related Questions