Angular one resolve for all states

Question

I got a routeProvider for my states.

$routeProvider.
      when("/register",{
        templateUrl: "templates/register.html",
        controller: "RegisterCtrl",
        resolve: {
          user: function(Auth) {
            return Auth.resolveUser();
          }
        }
      }).
      when("/home",{
        templateUrl: "templates/home.html",
        controller: "HomeCtrl",
        resolve: {
          user: function(Auth) {
            return Auth.resolveUser();
          }
        }
      }). .... [.....]

Every state got a promise which resolves, when user-state is loggedIn. Then the code of the different controllers is executed. Now I want to have a mainController for the navigation bar, which should be present on all sites. The controller needs the userdata for checking for new messages etc.

Now: how is it possible to define the resolve globally in a root state (so i can access the userdata in the root controller for all sites) and all the other controllers execute their code only, if the promise from this roote state is resolved?

I hope I formulated my question understandable...

I'm not sure I understand everything but if you want something accessible in every controller, you should make a Service https://docs.angularjs.org/guide/services or, less good, put in in the $rootScope — Boris Charpentier, Nov 18 '14 at 10:04
Thank you for your comment. Yeah I know about services. the resolve of the states is accessing a service. The Auth service which handles the login-state of the user. But how to resolve this promise ONLY ONCE in a parent state — m1crdy, Nov 18 '14 at 10:07

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

I think you're looking for something like $routeChangeStart, that is a way to execute something you want everytime the user changes his route inside your web app. Take a look at Route and this other question from stackoverflow. Hope it helps.

edited May 23 '17 at 12:20

Community

1
1

answered Nov 18 '14 at 10:12

augustoccesar

658
9
30

not exactly. The controllers of the different states PLUS the main controller for navigation on all pages needs to wait. With your solution they are executing the code before the user object is recieved from the database. So they need to wait for that resolve in every state (checking if user is logged in) before executing the code. This works fine with the controllers of the separate states. But not with the controller for my navigation bar, because the controller should be on all pages. – m1crdy Nov 18 '14 at 10:19
I had a problem like this one. My pages were loading before the check if the user is really logged. Is this your problem? – augustoccesar Nov 18 '14 at 10:25
Well... I don't know if is the right way to do it, but I crated an scope variable `logged` and setted by default as `false` and put `ng-show='logged'` in the html of my main layout. On the controller that check if the user is logged I change the value of the `logged` for true if the user is really logged, so with that the page doesn't show until the `logged` variable is true. – augustoccesar Nov 18 '14 at 11:54
1

Thank you for your answer. But thats only sth for the frontend. I solved it as following: ng-controller="RootCtrl" to the body of the page -> call in the RootController Auth.resolveUser().then do things... – m1crdy Nov 18 '14 at 12:04
Pleased to help. Thanks for sharing your solution. I'm going to implemet in mine too. – augustoccesar Nov 18 '14 at 12:06

user2943490 · Answer 2 · 2014-11-19T05:16:52.237

You can do this by defining your routes outside of the $routeProvider.when statements:

var routes = [
  {
    url: "/register",
    config: {
      templateUrl: "templates/register.html",
      controller: "RegisterCtrl"
    }
  },
  {
    url: "/home",
    config: {
      templateUrl: "templates/home.html",
      controller: "HomeCtrl"
    }
  }
];

Then iterating through your routes to extend the resolve property before registering them with the $routeProvider:

angular.forEach(routes, function (route) {
  var url = route.url;
  var routeConfig = route.config;

  routeConfig.resolve = angular.extend(routeConfig.resolve || {}, {
    // add your global resolves here
    user: function(Auth) {
      return Auth.resolveUser();
    }
  });

  $routeProvider.when(url, routeConfig);
});

Your Auth.resolveUser() should be responsible for returning the fulfilled promise if it was already resolved previously.

Angular one resolve for all states

2 Answers2