What's wrong with routing?

Question

Angular

Hello, tell me what I'm doing wrong.
Config for routes

app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'template/main.html'
})
.when('/phones/:phoneId',{
templateUrl: '/template/phone.html',
controller: 'PhoneCntrl'
})
.otherwise({redirectTo:'/'})

Get phone ID

app.controller('PhoneCntrl','$routeParams', function($scope, $routeParams){
$scope.phoneId = $routeParams.phoneId;
});

And a link

<button><a href="/#/template/{{phone.id}}">Посмотреть</a></button>

When you click on the link, an address like this http:// localhost/#/ template/ motorola-xoom-with-wi-fi is displayed, but it does not show the file from the template folder, but the Denver root directory with all projects.

Answer 1

Use ng-href instead of href - this thing takes into account the peculiarities of how Angular works, for example, asynchronously loading values ​​into a list of elements. Otherwise, everything seems to be correct, except that in the controller you use one variable, and in the template you display the value of another:

$scope.phoneId = $routeParams.phoneId;
// Лучше - $scope.routeParams = $routeParams;

PS Link in the button? Why not use the same style sets for buttons and button links, as is done in Bootstrap?

Answer 2

The link is incorrect
The correct link should be like this (the first parameter in the route config) :

<button><a href="/#/phones/{{phoneId}}">Посмотреть</a></button>