I created a state and am attempting to navigate to another page. Despite no console errors, the navigation is not functioning as expected.
index.html
<body ng-app="app">
<a href='#/first-msg'>link</a>
<div ui-view></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
<script src="application.js"></script>
</body>
application.js
var app = angular.module('app', ['ui.router']);
app.config(['$stateProvider', '$locationProvider', function($stateProvider, $locationProvider) {
$stateProvider.state('firstMessage', {
url: '/first-msg',
templateUrl: 'home.html',
controller: 'homeCtrl'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);
app.controller("homeCtrl", ['$scope', function($scope) {
$scope.message = "This is home";
}]);
Upon clicking on the link, the URL appears as follows:
.../index.html#%2Ffirst-msg