So verwalten Sie 404 Fehler Laden von Richtlinientemplates in AngularJS

Question

In einer AngularJS-Direktive wird der Parameter templateUrl dynamisch definiert.

'templates/' + content_id + '.html' 

Ich will nicht, Regeln aufzustellen, zu überprüfen, ob content_id Wert gültig ist und verwalten als 404 Fehler, das heißt, wenn die Vorlage nicht vorhanden ist (Server einen 404-Fehler zurück, wenn die Vorlage laden) Last template/404.html stattdessen.

Wie kann ich das tun?

Bearbeitet: Die aktuellen Antworten schlagen vor, einen Antwortfehler Interzeptor zu verwenden. In diesem Fall - wie kann ich wissen, dass die Antwort auf ein Laden dieser Vorlage ist?

Answer 1

Sie müssen Antwort Interceptor schreiben. Etwas wie folgt aus:

app.factory('template404Interceptor', function($injector) { 
    return { 
     responseError: function(response) { 
      if (response.status === 404 && /\.html$/.test(response.config.url)) { 
       response.config.url = '404.html'; 
       return $injector.get('$http')(response.config); 
      } 
      return $q.reject(response); 
     } 
    }; 
}); 

app.config(function($httpProvider) { 
    $httpProvider.interceptors.push('template404Interceptor'); 
}); 

Demo:http://plnkr.co/edit/uCpnT5n0PkWO53PVQmvR?p=preview

Answer 2

Sie können eine interceptor erstellen, um alle Anfragen zu überwachen, die mit dem $http Service durchgeführt wurden, und etwaige Antwortfehler abzufangen. Wenn Sie für eine Anfrage einen Status 404 erhalten, leiten Sie den Benutzer einfach zur Fehlerseite (template/404.html in Ihrem Fall) um.

.factory('httpRequestInterceptor', function ($q) { 
    return { 
     'responseError': function(rejection) { 
      if(rejection.status === 404){ 
       // do something on error     
      } 

      } 
      return $q.reject(rejection); 
     } 
    }; 
}); 

Sie müssten die Abfangjäger $httpProvider in Ihrer Konfigurationsfunktion drücken.

myApp.config(function ($httpProvider, $interpolateProvider, $routeProvider) { 
    $httpProvider.interceptors.push('httpRequestInterceptor'); 
}); 

Hier ist die demo

Prost!