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-02 12:33:41Z

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 2, 2015 at 12:33

answered Jun 2, 2015 at 11:19

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:14:27Z

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);

Pankaj Parkar · Accepted Answer · 2015-06-02 15:20:47Z

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.

Collectives™ on Stack Overflow

Issue with Angular Js resolve method

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related