2016-03-24 3 views
6

Sto usando AngularJS e ui-router e hanno il seguente codice che cattura 404 e di carichi in un modello 404:carico 404 Stato con AngularJS Router

$urlRouterProvider.otherwise(function($injector, $location){ 
    $injector.invoke(['$state', function($state) { 
    $state.go('404'); 
    }]); 
}); 

mantiene l'URL intatta invece di reindirizzare, ma mostra la 404 template:

.state('404', 
{ 
    views: { 
     'body': { 
      templateUrl: 'partials/404.html', 
     } 
    } 
}); 

Normalmente sarebbe reindirizzare allo stato radicolare con: $urlRouterProvider.otherwise('/');

Tuttavia quando la modalità HTML5 viene spenta e l'utente visita l'URL di root, ad es. http://www.domain.com/app/ carica lo stato 404 invece di reindirizzarlo a http://www.domain.com/app/#/

Come è possibile mantenere il codice di stato 404 sopra, ma farlo reindirizzare all'hashbang quando si accede alla pagina iniziale? In modo efficace ha solo il carico 404 se la richiesta è diversa dalla home page?

non posso usare il $stateNotFound o $stateChangeSuccess e hanno bisogno di un modo per verificare se si tratta di una richiesta di home page all'interno della configurazione di configurazione vero e proprio che può passare dalla / e state.404 all'interno del altrimenti dichiarazione.

+0

è possibile fornire ulteriori dettagli codice – niku

+0

Vuoi una soluzione sia per la modalità HTML5 on e off? Se spedisci la tua applicazione in una sola modalità, sarebbe più semplice discutere delle possibili soluzioni. Conosco almeno una soluzione. – stanleyxu2005

risposta

3

Quindi qualcosa sulla falsariga di (che sembra funzionare).

$urlRouterProvider.otherwise(function($injector, $location){ 
    $injector.invoke(['$state', function($state) { 
     if($location.$$path == '') 
      $state.go('home'); // redirect to /#/ 
     else 
      $state.go('404'); // else go to 404 state 
    }]); 
}); 

Ma c'è un modo migliore per gestire questo?

0

Utilizzare un httpErrorResponseInterceptor! Questo verrà generato quando si verifica un httpResponse. Ecco un esempio

angular 
    .module('myApp') 
    .factory('httpErrorResponseInterceptor', ['$q', '$state', function ($q, $state) { 
    return { 
     responseError: function error(response) { 
      switch (response.status) { 
       case 404: 
        $state.go('404'); 
        break; 

       default: 
        console.log("Unhandled HTTP error:", response); 
      } 

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