improper url link in angularJs - angularjs

Question

I am working in MEAN stack. For my front-end, I am trying to render data of single item from my item list with angular. When I click the item, the URL changes to other than I have set and I don't get the data. I was able to see this only after using debugging mode. The expected link is /item/:itemid but I am getting /item/partials/item.html I have used the following files:
main.route.js (only route with problem shown)
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/item/:itemid', {
templateUrl: 'partials/item.html',
controller: 'productCtrl',
controllerAs: 'vm'
})
.otherwise({redirectTo: '/'});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
};
myData.service.js
angular
.module('myApp')
.service('myData', myData);
function myData ($http) {
var itemById = function (itemid) {
return $http.get('/api/items/' + itemid);
};
return {
itemById : itemById
};
}
product.controller.js
angular
.module('myApp')
.controller('productCtrl', productCtrl)
function productCtrl($routeParams, myData) {
var vm = this;
vm.itemid = $routeParams.itemid;
myData.itemById(vm.itemid)
.success(function(data) {
vm.data = { item : data };
vm.pageHeader = {
title: vm.data.item.name
};
})
.error(function (e) {
console.log(e);
});
};
items.html (link to single item page)
<a href='/#/item/{{ item._id }}'>{{ item.name }}</a>
item.html
<div ng-controller='productCtrl'>
<div class='container'>
<page-header content='vm.pageHeader.title'></page-header>
</div>
</div>
Forgive me if the question doesn't make much sense as I am new to this. Thanks in advance!

Answer 1

Remove the slash on this anchor below:
<a href='#/item/{{ item._id }}'>{{ item.name }}</a>