CODEWITHSUNDEEP
angularjsroutes
Michael Heuberger
Michael Heuberger

Reputation: 872

AngularJS error handling when resolving stuff inside the router?

I've been doing lots of research on how to deal with errors best. Let's assume I have this AngularjS code:

$routeProvider

    .when('/videomail/:key', {
        templateUrl : 'view.html',
        controller  : 'ViewCtrl',
        title       : 'View',
        hideHeader  : true,
        hideFooter  : true,
        resolve: {
            videomail: function($rootScope, $route, Videomail) {
                return Videomail.get({key: $route.current.params.key}).$promise.then(function(videomail) {
                    return videomail
                }, function(err) {
                    // How can I present the error here?
                    // Should I return it like 'return err' and let the controller deal with it?
                    // Or can I forward this to another controller?
                    // PS: It can be a 404 or a 401 error 
                })
            }
        }
    })

Check out my questions in the code comments. What can I try next?

Upvotes: 4

Views: 5815

Answers (2)

Hugo Wood
Hugo Wood

Reputation: 2260

Since you don't want the route to change, and you don't want to handle the error in the controller, you can do this:

  • Resolve the promise with something that is unambiguously an error. You have to resolve the promise because if you don't, the route will not be loaded at all, and you can't change that in $routeChangeError.

    videomail: function($rootScope, $route, Videomail) {
    return Videomail.get({key: $route.current.params.key}).$promise.then(function(videomail) {
        return videomail
    }, function(err) {
        return { resolveError: err }
    })
}

  • Somewhere in the app (maybe in run), intercept $routeChangeSuccess and check if an error occured.

    $rootScope.$on('$routeChangeSuccess', 
    function (event, current, previous) {
        if (current.locals.videomail && current.locals.videomail.resolveError) {
            current.locals.$template = $templateCache.get('error.html')
            $rootScope.error = current.locals.videomail.resolveError
        }
    }
)

Now you just have to write a template named error.html that will display something depending on the error object present in the scope.

DEMO

It works but I think it is kind of a hack. I don't believe Angular was meant to be used that way.

Upvotes: 4

Hugo Wood
Hugo Wood

Reputation: 2260

You can use the $location service to redirect to another route.

return Videomail.get({key: $route.current.params.key}).$promise.then(function(videomail) {
    return videomail
}, function(err) {
    $location.path('/error')
})

Upvotes: 3

Related Questions