AngularJS : How to use one resolve for all the routes of my application

Question

I would like to resolve the promise that loads the current user for all the pages of my application. Currently I repeat the resolve in every $routeProvider.when() of my routes.

  $routeProvider.when('/users/edit/:userId', {
  templateUrl: 'app/app/assets/partials/user-edit.html', 
  controller: 'UserEditController',
  resolve:{  
    'currentUser':function( UserService){            
        return UserService.getCurrentUser();
      }
  }
  });  

  $routeProvider.when('/staff_profil/edit', {
  templateUrl: 'app/app/assets/partials/profil-edit.html', 
  controller: 'ProfilEditController',
  resolve:{  
    'currentUser':function( UserService){            
        return UserService.getCurrentUser();
      }
  }
 });

My goal is to resolve my current user for all the routes without repetition.

Jordan Lapp · Accepted Answer · 2015-01-16 01:15:58Z

28

For completeness, here is the whole solution, using angular instead of underscore, with a chainable 'when'. Nothing new in this code, just combined a bunch of the answers above.

var originalWhen = $routeProvider.when;

    $routeProvider.when = function(path, route) {
        route.resolve || (route.resolve = {});
        angular.extend(route.resolve, {
            CurrentUser : function(User) {
                return User.current();
            }
        });

        return originalWhen.call($routeProvider, path, route);
    };

answered Jan 16, 2015 at 1:15

Jordan Lapp

9929 silver badges20 bronze badges

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

1 Comment

Ketan Over a year ago

This should be the right answer. For me the accepted answer throws error when I don't use .call

Josh · Accepted Answer · 2013-11-12 19:36:08Z

24

You could always wrap the existing when method on the $routeProvider with your own implementation.

var myModule = angular.module('myModule', ['ngRoute'])
   .config(['$routeProvider', function($routeProvider){

      var originalWhen = $routeProvider.when;

      $routeProvider.when = function(path, route){

         route.resolve = {
            'currentUser':function( UserService){            
              return UserService.getCurrentUser();
            }
         };

         return originalWhen(path, route);
      };   

   }]);

You probably want to add some error checking in there, and use something like underscores defaults method instead of just overwriting the existing resolve property, but at least this way you can guarantee all your routes will have what you want.

It's also easy enough to wrap this up into a helper method.

answered Nov 12, 2013 at 19:36

Josh

45k7 gold badges106 silver badges125 bronze badges

3 Comments

nshew13 Over a year ago

This looks great, but I get Error: [$injector:modulerr] Failed to instantiate module ... due to: $routeProvider.when(...) is undefined, even if all the override method does is return originalWhen(path, route); Instead, I appended a new method, $routeProvider.accessWhen, which can return $routeProvider.when(path, route);, and call .accessWhen instead of .when in my routes setup.

Yngve B-Nilsen Over a year ago

wouln't the 'currentUser' resolve be overwritten if you add the resolve-property in the actual route? Maybe route.resolve = route.resolve || { }; route.resolve.currentUser = ... would be better?

v0d1ch Over a year ago

Can you do something similar wiith ui-router ?

RavenSteel · Accepted Answer · 2014-11-13 12:05:21Z

4

The @Josh answer is correct, except you have to invoke originalWhen function differently:

originalWhen.call($routeProvider, path, route);

answered Nov 13, 2014 at 12:05

RavenSteel

412 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:18:19Z

3

Both @N13 and I could not make @Josh's solution work. But this did work for me:

    module.config(['$routeProvider', function($routeProvider){
        $routeProvider.accessWhen = function(path, route){
            route.resolve || (route.resolve = {});
            route.resolve.language = "something"
            return $routeProvider.when(path, route);
        };
    }]);

use with:

$routeProvider
        .accessWhen('/login', {
           ...
        });

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Jan 12, 2015 at 23:35

Aeneas

311 bronze badge

1 Comment

steampowered Over a year ago

This seems like the simplest solution to me

merqlove · Accepted Answer · 2016-05-18 15:55:36Z

2

I found that this case much better:

angular.extend({}, $routeProvider, {
  when: function(path, route) {
    route.resolve || (route.resolve = {});
    route.resolve = angular.merge({}, route.resolve, {
      chef: 'OrganizationCheckerProvider'
    });
    return $routeProvider.when(path, route);
  }
});

edited May 18, 2016 at 15:55

answered Aug 17, 2014 at 16:54

merqlove

3,7841 gold badge25 silver badges22 bronze badges

3 Comments

Endless Over a year ago

When the question is in javascript it should be answered in javascript.<br> This also use underscore... which he/she might not use

merqlove Over a year ago

Endless, ok, changed to JS. lodash/underscore is preferred by me here, because it have excellent deep merge. He/she can try alternatives for lodash/underscore if not use.

steampowered Over a year ago

AngularJS has angular.merge(destination, source) which looks similar to the lodash implementation _.merge().

Michael Warner · Accepted Answer · 2019-03-06 16:23:44Z

0

For the people stuck with old code bases.

const _when = $routeProvider.when;
$routeProvider.when = (path, route) => _when.call($routeProvider, path, {
  ...route,
  resolve: {
    ...route.resolve,
    'currentUser': [ 'UserService', UserService => UserService.getCurrentUser() ]
  }
});

answered Mar 6, 2019 at 16:23

Michael Warner

4,3673 gold badges25 silver badges50 bronze badges

Comments

abhijat_saxena · Accepted Answer · 2022-12-05 20:34:34Z

Combining all answers together

var myModule = angular.module('myModule', ['ngRoute'])
        .config(['$routeProvider', function ($routeProvider) {
            var originalWhen = $routeProvider.when;

            $routeProvider.when = function (path, route) {
                route.resolve || (route.resolve = {});
                angular.extend(route.resolve, {
                    CurrentUser: ['User', function (User) {
                        return User.current();
                    }]
                });
                return originalWhen.call($routeProvider, path, route);
            };
        }]);

Collectives™ on Stack Overflow

AngularJS : How to use one resolve for all the routes of my application

7 Answers 7

1 Comment

3 Comments

Comments

1 Comment

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

3 Comments

Comments

1 Comment

3 Comments

Comments

Comments

Linked

Related