AngularJS无法路由到其他页面

Question

I have a simple web project that has a phone list and each element in that list contains a phone detail information. 我有一个简单的Web项目，其中包含电话列表，该列表中的每个元素都包含电话详细信息。 If I clicked on a phone id, it should bring me to a page for that phone only, however, nothing happened after a phone id was clicked. 如果单击电话ID，它应该只会将我带到该电话的页面，但是，单击电话ID后什么也没有发生。

When the app was loaded, it went to the index page with a url: 加载应用后，它会使用网址转到索引页面：

http://localhost:8080/angular-route-multiple-views/index.html#!/phones http：// localhost：8080 / angular-route-multiple-views / index.html＃！/ phones

After I clicked on the first phone id, the url was changed to the following but it didn't go to that page at all: 单击第一个电话ID后，URL更改为以下内容，但根本没有转到该页面：

http://localhost:8080/angular-route-multiple-views/index.html#!/phones#%2Fphones%2Fnexus http：// localhost：8080 / angular-route-multiple-views / index.html＃！/ phones＃％2Fphones％2Fnexus

Can someone please help and let me know why it didn't go to the phone detail page ? 有人可以帮忙，让我知道为什么它没有进入电话详细信息页面吗？ Thanks. 谢谢。

index.html index.html

<!DOCTYPE html>
<html ng-app="mainModule">
<head>
<meta charset="ISO-8859-1">
<title>AngularJS Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.js"></script>
<script src="js/main-module.js"></script> 
<script src="js/phonelist-module.js"></script> 
<script src="js/phonelist-component.js"></script> 
<script src="js/config.js"></script>
<script src="js/phonedetail-module.js"></script>
<script src="js/phonedetail-component.js"></script>         
</head>
<body>
    <div ng-view></div>
</body>
</html>

main-module.js: main-module.js：

angular.module('mainModule', ['ngRoute', 'phoneList', 'phoneDetail']);

config.js: config.js：

angular.module('mainModule').
 config(['$locationProvider', '$routeProvider', 
      function config($locationProvider, $routeProvider) {
      $locationProvider.hashPrefix('!');

      $routeProvider.
      when('/phones', {
         template: '<phone-list></phone-list>'
      }).
      when('/phones/:phoneId', {
        template: '<phone-detail></phone-detail>' 
      }).
      otherwise('/phones');
  }
]);

phonelist-module.js: phonelist-module.js：

angular.module('phoneList', ['ngRoute']);

phonelist-component.js: phonelist-component.js：

 angular.module('phoneList').component('phoneList', {
 templateUrl: 'js/phone-list.template.html',  
  controller: function PhoneListController() {
  this.phones = [
    {
      id: 'nexus',
      name: 'Nexus S',
      snippet: 'Fast just got faster with Nexus S.',
    },
    {
      id: 'motorola-xoom',
      name: 'MOTOROLA XOOM™',
      snippet: 'The Next, Next Generation tablet.',
    }
  ];
}
});

phonedetail-module.js: phonedetail-module.js：

angular.module('phoneDetail', ['ngRoute']);

phonedetail-component.js: phonedetail-component.js：

angular.module('phoneDetail').
  component('phoneDetail', {
     template: 'TBD: Detail view for <span>{{$ctrl.phoneId}}</span>',
     controller: ['$routeParams',
     function PhoneDetailController($routeParams) { 
        this.phoneId = $routeParams.phoneId;
    }
  ]
 });

phone-list.template.html: phone-list.template.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Phone List</title>
</head>
<body>
    <li ng-repeat="phone in $ctrl.phones" >
    <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
    <p>{{phone.snippet}}</p>
   </li>
 </ul>
</body>
</html>

Answer 1

Your forgot to add ! 您忘了加! in the href attribute. 在href属性中。

<ul>
    <li ng-repeat="phone in $ctrl.phones">
        <a href="#!/phones/{{phone.id}}">{{phone.name}}</a>
        <p>{{phone.snippet}}</p>
    </li>
</ul>

AngularJS无法路由到其他页面

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-02-14 23:04:40

AngularJS无法路由到其他页面

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-02-14 23:04:40

解决方案1
1 已采纳 2017-02-14 23:04:40