Issue with Angular Js resolve method

Question

Hi I have a $stateProvider like below.

$stateProvider .state('team.details', {
  url: '/:teamId',
  views: {
    '@': {
      controller: 'teamDetailsCtrl',
      templateUrl: 'src/modules/team/details/teamDetails.html',
      resolve: {
        user: function ($stateParams, TeamResource) {
          return TeamResource.get({ teamid: $stateParams.teamId }).$promise;
        }

The TeamResource.get is calling a rest api and everything is working fine if the data is sent from the rest api(teamid present in DB). But if the data is not present then I have to route it to a "home". How can i accomplish it ?

Pankaj Parkar · Accepted Answer · 2015-06-02T12:33:41.363

2

You resolve could handle that thing, if data is there then return that data using chain promise or else redirect the to different state.

Code

resolve: {
  user: function($stateParams, TeamResource, $state) {
    return TeamResource.get({
      teamid: $stateParams.teamId
    }).$promise.then(function(data) {
      if (!data.length > 0) { //here might be you need to use something else instead of data
        $state.go('home')
        return
      } else {
        return data;
      }
    });
  }

edited Jun 02 '15 at 12:33

answered Jun 02 '15 at 11:19

Pankaj Parkar

134,766
23
234
299

@robin Glad to help you..Thanks – Pankaj Parkar Jun 02 '15 at 12:13

score 0 · Answer 2 · edited May 23 '17 at 12:14

What kind of response does your API return? My suggestion is that you set up a global http interceptor for your app which could listen to 404 responses. And in that case redirect users to your home state.

By putting the logic in an interceptor instead of the resolve, you can avoid redundant code if you have several states which may benefit from this kind of check.

This is an example interceptor, taken from this SO post.

Note that this may only be wanted for a specific endpoint (eg the teams). You can check which url got called by accessing the url property of response. Like so: response.url

var interceptor = ['$q', '$state', function ($q, $state) {

    function success(response) {
        return response;
    }

    function error(response) {
        var status = response.status;
        var url = response.url;

        if (status == 404) {
            $state.go('home')
            return;
        }

        // otherwise
        return $q.reject(response);
    }

    return function (promise) {
        return promise.then(success, error);
    }

}];

$httpProvider.responseInterceptors.push(interceptor);

score 0 · Answer 3 · edited Jun 02 '15 at 15:20

Angular $http.get() returns a promise itself. if case of any error, you just need to reject the same with $q service.

In resolve:

resolve : {
    user : function ($stateParams, TeamResource) {
        return TeamResource.get({
            teamid : $stateParams.teamId
        });
    }
}

Under TeamResource.get:

return {
    get : function (teamObj) {
        $http.get("/url", teamObj).then(function (resp) {
            if (resp.length) {
                return resp;
            } else {
                return $q.reject(resp);
            }
        }, function (err) {
            return $q.reject(resp);
        });
    }
}

In case of return in promise() with $q.reject(), the promise chain sends it to error callback to the next chain and if you just return with something, it sends it to success function in next promise chain.

Issue with Angular Js resolve method

3 Answers3