CODEWITHSUNDEEP
javascriptangularjsroutesangular-ui-router
Shawn31313
Shawn31313

Reputation: 6052

How to preload an angular route and switch only when the route has been successfully loaded?

I am currently developing an administrative dashboard for my place of work using the BlurAdmin template. While this template contains many great features and great functionality, I found that this dashboard was not quite optimized for my use case. The dashboard that I am developing is completely based on a RESTful API built separately by one of my colleagues. Every page loads in its data through this API using AJAX and have found that most of the time, the page shows up before the API completes. This means that things just sporadically show up as the calls complete. In order to make for a smoother UI experience, I have began working on a solution for this.

Current Solution
While a route is being loading, a rootScope variable $isLoading is set to true which displays a loading overlay stretched over the page. In order to determine completion, I watch $http.pendingRequests.length until it is equal to 0 which tells me that the page has loaded successfully (based solely on http calls).

Desired Solution
While a route is being loaded, I would like the page not to change but instead utilize a top-bar loader and only when the page is loaded, should the routes change.

The routing is currently done by BlurAdmin using the ui-router module and the view is always instantly displayed by the ui-view directive.

My question then is: How do I preload an angular route into a hidden view while it builds, and only once I detect that all API calls have completed on this new route, should the hidden view switch to the visible view and the old visible view be removed?

Upvotes: 2

Views: 371

Answers (1)

Andrew Lahikainen
Andrew Lahikainen

Reputation: 370

You could do this by using a resolve on your state declaration. The basic idea would be to call your API from your resolve functions on the relevant state declarations. If you return promises from these functions the state will not be entered until the promises are all resolved. The values will then be bound into your component.

To show the spinner/loading bar on state transitions you could register a Transition Hook for 2 events: onStart and onFinish. Inside your onStart hook set some state on a service. Let's say isTransitioning = true;. Inside your onFinish hook, set this to false. Your spinner component could then watch this state and show itself when appropriate.

Upvotes: 1

Related Questions