How to take advantage of AngularJS $routeprovider resolve feature and keeps a good loading user experience

Question

I have read a few articles about the $routeprovider resolve feature. The main idea comes from this repo created by my favorite AngularJS developer Todd Motto. https://github.com/toddmotto/angularjs-styleguide#controllers

// avoid
function MainCtrl (SomeService) {
  var _this = this;
  // unresolved
  _this.something;
  // resolved asynchronously
  SomeService.doSomething().then(function (response) {
    _this.something = response;
  });
}
angular
  .module('app')
  .controller('MainCtrl', MainCtrl);

// recommended
function config ($routeProvider) {
  $routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    resolve: {
      // resolve here
    }
  });
}
angular
  .module('app')
  .config(config);

I really like the way how route resolves all the controller dependencies first before loading the controller. It keeps the code very clean. However, if the resolve process takes a significant amount of time, the page will stuck there with no visual feedback until everything finishes loading.

Before I switched to use $routeprovider resolve, I used to put everything in the controller then create a async loading view directive. The directive will display a loading progress bar while all the $http requests are downloading data. I am wondering if there is a way to keep the visual feedback and also put all the resolve steps in the route provider.

Thanks!

Note that it's no different from a static web site, where nothing happens until the response comes back from the server. The only difference is the native browser spinner feedback. I use an HTTP interceptor that makes a spinner icon visible if an AJAX request takes more than 500 millis. code.angularjs.org/1.2.20/docs/api/ng/service/… — JB Nizet
– JB Nizet, Commented Sep 15, 2014 at 20:59
Hi JB Nizet, although using HTTP interceptor could solve the issue but I may not want to track all the http request. Todd's answer is more straightforward since it attacks the route change directly. Thanks indeed! — zeroliu
– zeroliu, Commented Sep 17, 2014 at 18:59

Todd Motto · Accepted Answer · 2014-09-16 12:30:56Z

2

When the resolves are kicking off, you can hook into $routeChangeStart and $routeChangeSuccess events. These events you listen for and can show or hide ajax spinners/loading messages based on the event type.

More here!

answered Sep 16, 2014 at 12:30

Todd Motto

9136 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Todd Motto Over a year ago

@zeroliu :P heyyyyyyyyyy! Hope this helped anyway, happy coding.

Collectives™ on Stack Overflow

How to take advantage of AngularJS $routeprovider resolve feature and keeps a good loading user experience

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related