After completing an AngularJS lesson, I encountered an issue where Angular was not able to understand links to the details page, such as template/1, when clicking on a link from the browser. However, when manually entering the URL in the address bar of the browser, it worked perfectly fine. How can this issue be resolved?
App.js
angular.module('templateStore.templates', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/templates', {
templateUrl: 'templates/templates.html',
controller: 'TemplatesCtrl'
})
.when('/template/:templateId', {
templateUrl: 'templates/template-details.html',
controller: 'TemplateDetailsCtrl'
})
.otherwise({
redirectTo: '/templates'
});
}])
.controller('TemplatesCtrl', ['$scope', function($scope) {
console.log('This is Template ');
}])
.controller('TemplateDetailsCtrl', ['$scope', '$http', function($scope, $http) {
console.log('This is Template Details');
}])
.controller('TemplateDetailsCtrl', ['$scope', '$http', function($scope, $http) {
console.log('This is Template Details');
}]);
Templates.html(main page)
<div class="col-md-4 template">
<h3>Template 4</h3>
<img src="img/4.jpg">
<h4>$29.99</h4>
<a class="btn btn-primary btn-block" href="#/template/1">Details</a>
</div>
Here is an image showing the highlighted URL in the address bar after being clicked.