Angular Routing only works for one case - angularjs

Question

So I'm trying to use angular routing for my project but it seems that only one route is working properly. I can access any of the routes if I used 'localhost/#/{{routeName}}' but everything except home returns a 404 error when I use the format 'localhost/{{routeName}}'. Here's my config
angular.module('shasta-water', ['search', 'ngRoute']).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
redirectTo: '/home'
})
.when('/home', {
templateUrl: 'Templates/HomeTemplate.html'
})
.when('/search', {
templateUrl: 'Templates/SearchTemplate.html',
controller: 'searchCtrl'
})
.when('/add', {
templateUrl: 'Templates/AddTemplate.html'
})
.otherwise({
// templateUrl: 'Templates/ErrorTemplate.html'
redirectTo: '/home'
});
}]);

Answer 1

You'll need to make sure the server also knows what do with these urls it receives requests for when you use HTML5 mode (without #) you can do this by:
Apache/PHP
Inside your .htaccess file in your root folder. Handle routes in index.php
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.php [NC,L]
From: https://stackoverflow.com/a/22740184/5171528
ASP.NET
<!-- from https://stackoverflow.com/questions/25916851/wrapping-staticfilemiddleware-to-redirect-404-errors -->
<configuration>
<system.webServer>
<modules runAllManagedModulesForAllRequests="true" />
<rewrite>
<rules>
<!--Redirect selected traffic to index -->
<rule name="Index Rule" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_URI}" matchType="Pattern" pattern="^/api/" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>