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.

Gantt

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 and this might be helpful. – Whitethroat

Answer 1

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'
    })

Offspring

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 #27686154 – Simple

Answer 2

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

Phosphoric

Agreed. This is a much better, more generic way to implement error handling in Angular app. – Sansone

Answer 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

Engeddi

Answer 4

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.

Shlomo