Come gestire 404 errori nel caricamento di modelli di direttive in AngularJS

Question

In una direttiva AngularJS il parametro templateUrl viene definito dinamicamente.

'templates/' + content_id + '.html' 

Non voglio stabilire regole per controllare se content_id valore è valido e gestirla come errori 404, vale a dire se il modello non esiste (server restituirà un errore 404 durante il caricamento del modello) carico template/404.html anziché.

Come posso farlo?

Modificato: le risposte correnti suggeriscono di utilizzare un intercettore di errore di risposta. In questo caso, come posso sapere che la risposta è al caricamento di questo modello?

Answer 1

Sarà necessario scrivere l'interceptor dell'errore di risposta. Qualcosa di simile a questo:

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

È possibile creare un interceptor per monitorare tutte le richieste effettuate con il servizio $http e intercettare eventuali errori di risposta. Se si ottiene uno stato 404 per qualsiasi richiesta effettuata, è sufficiente reindirizzare l'utente alla pagina di errore (template/404.html nel tuo caso).

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

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

Si avrebbe bisogno di spingere l'intercettore per $httpProvider nella funzione di configurazione.

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

Ecco il demo

Cheers!