Что не так с rout-ингом?

Question

[Max]

Здравствуйте, подскажите что я делаю не так.
Конфиг на маршруты

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

Получения ID телефона

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

И ссылочка

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

При переходе по ссылке выводится адрес такого вида http:// localhost/#/ template/ motorola-xoom-with-wi-fi, но показывает не файл с папки template, а корневой каталог денвера со всеми проектами.

Answer 1

[Максим Дунаевский]

Используйте не href, а ng-href - эта штука учитывает особенности работы Angular, например, асинхронную подгрузку значений в список элементов. В остальном всё вроде правильно, за исключением того, что в контроллере Вы используете одну переменную, а в шаблоне выводите значение другой:

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

Что имеете

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

Что должно быть:

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

P. S. Ссылку в кнопку? Почему бы не использовать для кнопок и ссылок-кнопок одни и те же наборы стилей, как это сделано в Bootstrap?

Answer 2

[Николай]

Ссылка неправильная
Правильная ссылка должна быть такая(первый параметр в конфиге роута) :

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