CODEWITHSUNDEEP
angularjsangularjs-routing
zilcuanu
zilcuanu

Reputation: 3715

Redirecting to error page in Angularjs

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.

Upvotes: 12

Views: 36499

Answers (4)

felippe
felippe

Reputation: 490

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.

Upvotes: 0

IUnknown
IUnknown

Reputation: 22448

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

Upvotes: 33

Raghavendra
Raghavendra

Reputation: 5387

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

Upvotes: 17

chf
chf

Reputation: 763

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

Upvotes: 3

Related Questions