不了解路线

Question

I took an AngularJS lesson. But Angular is not understanding links to the details page, like template/1 if I click on a link from the browser. However, if I enter the URL in the address bar of the browser it works fine. How can I resolve this?

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>

Attached is the image in which I highlighted the url in the address bar after clicking it

Answer 1

.when('/template/:templateId', {
             templateUrl: 'templates/template-details.html',
              controller: 'TemplateDetailsCtrl'
             })  

 App.controller('TemplateDetailsCtrl', ['$scope', '$http',
'$routeParams', function($scope, $http, $routeParams) {        
     console.log($routeParams.templateId); }]);

Demo Yes you need #/template/2 and above its working code. may this help you....