Creating a simple single page application with multiple partial pages in MVC5 has been a challenge. I have set up route configurations and controllers, but unfortunately, the links are not working as expected. When clicking on a link, instead of navigating to the correct URL, an extra '#' character is added to the address.
For example, when clicking on a link from this route: http://localhost:33087/CrudDemoApp.html#!/ it unexpectedly redirects to http://localhost:33087/CrudDemoApp.html#!/#Test rather than the desired URL which should be http://localhost:33087/CrudDemoApp.html#!/Test without the '#'. However, manually entering the correct URL in the address bar works fine.
How can I remove this extra '#' from my links' URLs?
Below is my app and route configuration:
var app2 = angular.module('customersApp', ['ngRoute']);
app2.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
controller: 'customersController',
templateUrl: '/Partials/customers.html'
}).
when('/Test', {
controller: 'customersController',
templateUrl: '/Partials/Test.html'
})
.otherwise({ redirectTo: '/' });
}]);
I have structured the container in my HTML like this:
<!DOCTYPE html>
<html>
<head>
<title>Crud</title>
<meta charset="utf-8" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/Ang/app.js"></script>
<script src="Scripts/Ang/controllers.js"></script>
</head>
<body ng-app="customersApp">
<a href="#Test" >TestLink</a> //How to set this links href??
<ng-view>
</ng-view>
</body>
</html>