2014-07-08 9 views
12

Sono nuovo di AngularJs. Ho una singola app di pagina con percorsi configurati con un controller e una vista. La vista viene caricata all'interno dell'elemento <ng-view></ng-view> della pagina index.html. All'interno del controller effettuo una chiamata http per ottenere i dati e associare i dati allo $scope. Per gli scenari di successo questo funziona bene, ma se c'è un errore come faccio a collegare un'altra vista invece della vista predefinita configurata all'interno della rotta angolare. Per favore mi faccia sapere.Reindirizzamento alla pagina di errore in Angularjs

+1

È preferibile non reindirizzare dalla pagina effettiva ma rendere il modello 404 all'interno dell'URL corrente. controlla il comportamento dei grandi siti Web relativi allo stato 404. per tale approccio [questo] (http://stackoverflow.com/questions/28171486/render-404-page-without-redirecting-in-angular-js) e [this] (http://stackoverflow.com/questions/18782149/render-404-invece-di-reindirizzamento-404-in-angularjs) potrebbe essere utile. – Reyraa

risposta

17

Usa $location.url() per reindirizzare a un 404.html quando si è verificato l'errore

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

Poi configurare il $routeProvider

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

c'è comunque il reindirizzamento alla pagina 404 prima di caricare la vista principale? perché in questo caso alla prima vista principale caricata e dopo che 404 sono stati caricati, c'è comunque da caricare solo 404 pagine? ecco la mia domanda http://stackoverflow.com/questions/27685654/angularjs-error-handling-in-ajax-request –

3

è possibile utilizzare: https://github.com/angular-ui/ui-router In caso di errore, è possibile attivare uno stato di "errore". Ho avuto lo stesso problema qualche settimana fa e ho risolto in questo modo

32

Per implementare uno scenario comune per l'elaborazione degli errori ajax è possibile implementare l'intercettore di richiesta personalizzato e reindirizzare l'utente alla pagina di errore (o alla pagina di accesso) in base allo stato di errore:

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

+2

concordato. Questo è un modo molto migliore e più generico per implementare la gestione degli errori nell'app Angular. – demisx

+0

Funziona piuttosto bene. Grazie per questo! – cancelledout

0

Se si utilizza $ stateProvider invece di $ routeProvider si può fare in questo modo:

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

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

Prestare attenzione alla $ urlRouterProvider.otherwise (url), che è la funzione che viene chiamata quando il provider non trova l'url richiesto, quindi reindirizza automaticamente all'URL fornito in questa funzione.

Problemi correlati