AngularJS無法路由到不同的頁面

我有一個簡單的Web項目，有一個電話列表，該列表中的每個元素都包含電話詳細信息。如果我點擊了電話號碼，它應該會將我帶到僅用於該電話的頁面，但是，在點擊電話號碼後沒有任何事情發生。AngularJS無法路由到不同的頁面

當加載應用程序，它去到索引頁面的URL：

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

我點擊了第一個電話號後，網址變更爲以下但事與願違進入該頁面所有：

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

是否有人可以幫助，讓我知道它爲什麼沒有去電話詳細頁面？謝謝。

的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>

主module.js：

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

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：

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

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：

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

phonedetail組分。 js：

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

電話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>

來源

2017-02-14 jlp

您是否嘗試將href更改爲ng-href？ '{{phone.name}}' –

你忘了在href屬性添加!。

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

來源

2017-02-14 23:04:40

這工作。謝謝！ – jlp

AngularJS無法路由到不同的頁面

回答

相關問題