CODEWITHSUNDEEP
javascriptangularjs
CaribouCode
CaribouCode

Reputation: 14398

Angular route resolve calling a service

I'm struggling to get Angular route resolve working. I find the documentation less than useless for more complex parts of the javascript framework like this.

I have the following service:

app.service("AuthService", ["$http", "$q", function($http, $q){

  this.test = function(){
    return $q(function(resolve, reject){
      var auth = false;
      resolve(auth);
    });
  }

}]);

Now my routes looks like this:

app.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider){

  $locationProvider.html5Mode(true).hashPrefix("!");

  $routeProvider

  .when("/account", {
    templateUrl: "/views/auth/account.html",
    controller: "AccountController",
    resolve: {
      auth: ["AuthService", function(AuthService) {
        return AuthService.test().then(function(auth){
          if (auth) return true;
          else return false;
        });
      }]
    }
  });

}]);

What I want to happen here is the following:

I don't think I've fully understood how to use resolve and my method so far does not work. Could someone please explain the correct way to do this?

Upvotes: 2

Views: 2533

Answers (2)

nat_jea
nat_jea

Reputation: 323

This solution works for me, I also tried with .then function but it's incorrect because resolve performs it.

resolve: {
auth:
    ["AuthService", "AnotherService", "$rootScope", function(AuthService, AnotherService, $rootScope) {
        if ($rootScope.yourCondition){
            return AuthService.getFunction();
        }
        else{
            return AnotherService.getAnotherFunction();
        }
    }]
},
views: {
'partialView@': {
    /* == Component version == */
    component: "yourComponent",
    bindings: {
        auth: 'auth',      // Inject auth loaded by resolve into component
        params: '$stateParams'
    }
}
}

Upvotes: 0

Brocco
Brocco

Reputation: 64853

The resolve block when configuring routes is designed to make navigation conditional based upon the resolution or rejection of a promise.

You are attempting to handle this by resolving with a resolution value of true or false

Please try the following:

resolve: {
  auth: ["AuthService", function(AuthService) {
    return AuthService.test().then(function(auth){
      if (!auth){
        throw 'not authorized';
      }
    });
  }]
}

This will cause the promise to be rejected and therefore not allow the routing to continue/complete.

Also of note is that the value coming out of the promise resolution will be injected into the handling controller

Upvotes: 2

Related Questions