Angular: $ http 404 Fehlerbehandlung

Question

Ich habe ein HTML mit 2 ng-Includes. Überlegen Sie, ob einer der ng-include src im Server nicht vorhanden ist. ab sofort würde es nur leer html laden und in der browser-konsole würde es http-404 datei nicht gefunden sagen.

Also in diesem Fall möchte ich eine Default Error Seite (die in Server vorhanden ist) in diesem bestimmten div nur, d. H. Eine Hälfte zeigt Default Error Page und andere mit dem richtigen div, die über nginclude geladen wurde.

Meine Logik ist, benutze einen http-Interceptor, wo ich alle http-Aufrufe abfangen. Wenn immer ein 404 passiert, möchte ich die Default Error-Seite zurückgeben, die nur in das div geladen werden muss. Es ist also so, als würde man einen korrekten HTTP-Aufruf spotten, aber stattdessen eine Fehlerseite senden, von der ich anmaße, dass sie in das richtige div geladen werden muss.

Aber das ist nicht happening :). Ich habe versucht mit Standard window.load (''). Aber dann lädt es oben auf der Seite und ist auf Seiten vorhanden.

Oder sollte ich die div-ID erfassen (wenn ja wie?) Und tat tat id den Default Error HTML laden?

Brauchen Sie Ihren Gedanken in diesem.

Answer 1

Um diese Art von Situationen zu behandeln, könnten Sie HTTP-Interzeptoren verwenden (die Dokumente finden Sie hier: $http).

Interceptor hat die 404-Antwort zu fangen, laden Sie die 404.html Seite von Ihrem Server und setzen es als Daten für die erste Antwort zusammen mit dem Status Code 200.

Ich habe erstellt ein Projekt, das zeigt, wie es zu lösen ist.

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

Werfen Sie einen genaueren Blick auf die main.js Datei.

Answer 2

Ich habe etwas ähnliches getan, indem ich die gewünschte ng-include-URL durch $ http direkt vor dem Auffüllen des ng-include-Wertes übergeben habe.

$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; 
    }); 

Der Trick hier ist vorbei $ templateCache in als Cache-Argument auf $ http - dies bedeutet, dass die abgerufenen URL im gleichen Cache gespeichert ist, die Verwendungen-ng enthalten, und so, wenn Sie eine gültige Vorlage finden und Legen Sie es in der templateUrl-Eigenschaft fest. ng-include muss die Vorlage nicht erneut abrufen.