I'm encountering a problem with the angular route provider. Here is the route configuration in app.js:
fmApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
templateUrl: 'staticViews/home.html,
controller: 'fmController'
}).otherwise({ redirectTo: '/' })
})
In my web.config file, I've set up URL rewriting to redirect all requests to index.html:
</system.webServer>
<rewrite>
<rules>
<rule name="Rewrite Url to layout.html">
<match url=".*\.html|css/|img/|js/|data/|lib/|templates/|favicon.ico" negate="true" />
<action type="Rewrite" url="layout.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
Within index.html, there is a form that, when submitted, should make a request to an action on the server side using $http
$scope.submit = function(){
$http({
method:'post',
url: '/api/test',
data: JSON.stringify(
angular.copy($scope.data)
)
})
}
The issue arises when attempting to request /api/test - it does not call the server-side (api-controller and test-action) but instead redirects to layout.html due to the rewrite in web.config. If I do not rewrite the URL in web.config and use
$locationProvider.html5Mode(true);