Question

我参加了AngularJS课程。但是如果我点击浏览器中的链接，Angular就不会理解指向详细信息页面的链接，比如template / 1。但是，如果我在浏览器的地址栏中输入URL，它可以正常工作。我该如何解决这个问题？

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（主页）

<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); }]);

演示是的，您需要＃/ template / 2及其工作代码。这可能对你有帮助....

不了解路线

1 个答案: