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.

Answer 2

I did something similar by passing the desired ng-include url through $http directly before populating the ng-include value.

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

The trick here is passing $templateCache in as the cache argument to $http - this means that the fetched url is stored in the same cache that ng-include uses, and so when you find a valid template and set it in the templateUrl property, ng-include does not need to fetch the template again.