Angolare: gestione errore $ http 404

Question

Ho un codice HTML con 2 ng-include. Considerare se uno dei src di ng-include non è presente nel server. a partire da ora caricarebbe solo html vuoto e nella console del browser direbbe che il file http-404 non viene trovato.

Quindi, in questo caso, voglio caricare una pagina di errore predefinita (che è presente nel server) solo in quel particolare div, cioè metà mostrando Default Error Page e altro con il div corretto che è stato caricato via nginclude.

La mia logica è che sto usando un intercettore http, dove intercetto tutte le chiamate http. Ogni volta che accade un 404, voglio restituire la pagina di errore di default che deve essere caricata solo nel div. quindi è come prendere in giro una chiamata http corretta ma inviare una pagina di errore, che presumo debba essere caricata sul div corretto.

Ma questo non è soddisfacente :). Ho provato con default window.load (''). Ma poi carica sulla parte superiore della pagina ed è presente in tutte le pagine.

Oppure devo acquisire il div id (se sì, come?) E poi tat id caricare il codice HTML di errore predefinito?

Hai bisogno del tuo pensiero in questo.

Answer 1

Per gestire questo tipo di situazioni è possibile utilizzare gli intercettori http (trovare i documenti qui: $http).

Interceptor deve prendere la risposta 404, caricare la pagina 404.html dal server e impostarlo come un dati per la risposta iniziale con il stato codice 200.

ho creato un progetto che mostra come risolverlo.

Repository: https://github.com/matys84pl/angularjs-nginclude-handling-404/

Date un'occhiata più da vicino il file main.js.

Answer 2

Ho fatto qualcosa di simile passando l'url ng-include desiderato tramite $ http direttamente prima di compilare il valore di ng-include.

$http({ url: url, method: "GET", cache: $templateCache}).success(function(data) { 
     /* there was a template for this url - set the $scope property that 
     * the ng-include is using 
     */ 
     $scope.templateUrl = url; 
    }).error(function() { 
     // there was not a template for this url - set the default one 
     $scope.templateUrl = defaultUrl; 
    }); 

Il trucco sta passando $ templateCache nel come argomento cache per $ http - questo significa che l'URL recuperato viene memorizzato nella stessa cache che ng-includono usi, e così quando si trova un modello valido e impostalo nella proprietà templateUrl, ng-include non ha più bisogno di recuperare il modello.