Redirecting to error page in Angularjs

Question

I am new to AngularJs. I have a single page app with routes configured having a controller and a view. The view get loaded inside the <ng-view></ng-view> element of the index.html page. Inside the controller I am making a http call to get the data and binding the data to the $scope. For success scenarios this works fine but if there is an error how do I plug in another view instead of the default view configured inside the angular route. PLease let me know.

It's preferred not to redirect from actual page but to render the 404 template inside the current URL. check out the behavior of great websites about the 404 state. for such an approach [this](http://stackoverflow.com/questions/28171486/render-404-page-without-redirecting-in-angular-js) and [this](http://stackoverflow.com/questions/18782149/render-404-instead-of-redirecting-404-in-angularjs) might be helpful. — Reyraa, Feb 09 '15 at 12:45

score 33 · Answer 1 · answered Jul 08 '14 at 08:25

To implement common scenario for processing ajax errors you can implement custom request interceptor and redirect user to error page (or login page) according to error status:

myApp.factory('httpErrorResponseInterceptor', ['$q', '$location',
  function($q, $location) {
    return {
      response: function(responseData) {
        return responseData;
      },
      responseError: function error(response) {
        switch (response.status) {
          case 401:
            $location.path('/login');
            break;
          case 404:
            $location.path('/404');
            break;
          default:
            $location.path('/error');
        }

        return $q.reject(response);
      }
    };
  }
]);

//Http Intercpetor to check auth failures for xhr requests
myApp.config(['$httpProvider',
  function($httpProvider) {
    $httpProvider.interceptors.push('httpErrorResponseInterceptor');
  }
]);

Plunker here

Agreed. This is a much better, more generic way to implement error handling in Angular app. — demisx, Feb 06 '15 at 22:02

score 17 · Accepted Answer · answered Jul 08 '14 at 07:11

17

Use $location.url() to redirect to a 404.html when error is occured

$http.get(url,[params])
    .success(function(data, status, headers, config){
        // bind your data to scope
    })
    .error(function(data, status, headers, config) {
        $location.url('/404');
    });

Then configure your $routeProvider

$routeProvider
    .when('/404', {
        templateUrl: '404.html',
        controller: 'Four04Controller'
    })

answered Jul 08 '14 at 07:11

Raghavendra

5,281
4
36
51

is there anyway to redirect to 404page befor loading main view? because in this case at first main view loaded and after that 404 was loaded , is there anyway to just load 404page? here is my question http://stackoverflow.com/questions/27685654/angularjs-error-handling-in-ajax-request – m hadadi Dec 30 '14 at 13:23

score 3 · Answer 3 · answered Jul 08 '14 at 07:08

3

you could use: https://github.com/angular-ui/ui-router In case of error, you can trigger a "error" state. I had the same problem some weeks ago and I have resolved in this way

answered Jul 08 '14 at 07:08

chf

743
4
14

score 0 · Answer 4 · answered Dec 12 '16 at 05:30

If you use $stateProvider instead of $routeProvider you can do like this:

function routerConfig($stateProvider, $urlRouterProvider) {
  $stateProvider
     .state('404', {
       url: '/404',
       templateUrl: '404.html'
     })
     .state('home', {
       url: '/',
       templateUrl: 'home.html'
     });

  $urlRouterProvider.otherwise('/404');
}

Pay attention to $urlRouterProvider.otherwise(url), which is the function that gets called when the provider doesn't find the requested url, so it automatically redirect to the url provided in this function.

Redirecting to error page in Angularjs

4 Answers4