javascript - Angular: $http 404 error handling

Question

i have an HTML with 2 ng-includes. Consider if one of the ng-include src is not present in the server. as of now it would just load blank html and in the browser console it would say http-404 file not found.

So in this case, i want to load a Default Error page (which is present in server) into that particular div only, i.e one half showing Default Error Page and other with the proper div which was loaded via nginclude.

My logic is, am using an http interceptor, where i intercept all http calls.whenever a 404 happens, i want to return the Default Error page which must be loaded into the div only. so its like mocking a correct http call but sending a error page instead, which i assume must be loaded to the proper div.

But this isnt happeneing :). I tried with default window.load(''). But then it loads on top of the page and is present across pages.

Or should i capture the div id (if so how?) and then do tat id load the Default Error HTML?

Need your thought in this.

Answer 1

To handle this kind of situations you could use http interceptors (find the docs here: $http).

Interceptor has to catch the 404 response, load the 404.html page from your server and set it as a data for the initial response along with the status code 200.

I've created a project that shows how to solve it.

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

Take a closer look at the main.js file.