By utilizing a URL rewrite in my web.config file, I have enabled the ability to insert URLs that do not contain a # symbol. This allows me to access URLs like , using "name" as a parameter to fetch a template file. Whenever this parameter is used with an XMLHTTPRequest, the pages consistently return a 200 response due to validation by the web.config rewrite. Is there a method to establish routes in Angular that will deliver the correct template regardless of whether a file exists or not, and if it doesn't, present a custom 404 page? Currently, on the homepage of my website, a template file is included which exhibits a header ng-view followed by a footer. When accessing a page such as and "random" does not correspond to an existing page, the homepage continues to load without displaying a 404 error page. The page persists to load endlessly.
========== Configuration in web.config ==============
<system.webServer>
<rewrite>
<rules>
<rule name="AngularJS Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
======= Angular Routing Settings ===============
angular.module('main').config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider)
{
//The use of services or factories is restricted so we are unable to utilize
//the angular $http provider. Instead, we rely on legacy HTTP AJAX requests
//to check the status of a given page.
var checkUrlStatus = function(url){
console.log(url + '.asp');
var http = new XMLHttpRequest();
http.open('GET', url, false);
http.send();
console.log(http.status);
return (http.status !== 404 ? url : 'https://somewebsite.com/404.asp');
}
//Eliminating hashes from URLs, must be utilized alongside the web.config or apache config file
if(window.history && window.history.pushState){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
//Determines conditions for routing to the appropriate template. Checks if the template
//returns the correct response using the checkUrl function before proceeding.
$routeProvider.when('/:param',{
templateUrl: function(params){
//return checkUrlStatus('https://somewebsite.com/pages/accounting.asp');
console.log(checkUrlStatus('https://somewebsite.com/pages/bob.asp') );
//return "/pages/"+url_param+".asp";
}
}).when('/',{
templateUrl: function(){
return 'home.asp';
}
}).otherwise({
templateUrl: function(){
return 'home.asp';
}
})
}
]);