My routing in AngularJS involves using ui-router for managing states:
$urlRouterProvider.otherwise('/Home');
$stateProvider
.state('home', {
url: '/Home',
templateUrl: '/Home/Home',
controller: 'MainCtrl'
})
.state('posts', {
url: '/Posts',
templateUrl: '/Home/Posts',
controller: 'PostCtrl'
});
$locationProvider.html5Mode(true);
Within my HTML file, I have the following structure:
<html>
<head>
<base href="/" />
<!--render scripts -->
<title>My Angular App!</title>
</head>
<body ng-app="flapperNews" ngcloak>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ul>
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="posts">Posts</a></li>
</ul>
<ui-view></ui-view>
</div>
</div>
</body>
</html>
While navigating using the menu links (Home, Posts) works smoothly and updates the view as expected, manually changing the URL in the address bar to localhost:port/Posts triggers a page refresh.
I have already removed the # from links. Why is Angular not recognizing my routes correctly?
Is there a way to implement client-side navigation using Angular?