這裏是我的代碼,
路由沒有在角JS正常工作
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<script src="lib/jquery.min.js"></script>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.js"></script>
<script src="lib/bootstrap.min.js"></script>
<div class="container">
<li><a href="#NewEvent">Add New Event</a>
</li>
<li><a href="#DisplayEvent">Display Event</a>
</li>
<div ng-view></div>
</div>
</body>
<script type="text/javascript">
var app = angular.module("myApp", ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/NewEvent', {
templateUrl: 'add_event.html',
controller: 'AddEventController'
}).
when('/DisplayEvent', {
templateUrl: 'show_event.html',
controller: 'ShowDisplayController'
}).
otherwise({
redirectTo: '/DisplayEvent'
});
}]);
app.controller("AddEventController", function($scope) {
$scope.message = "This is Add New Event";
});
app.controller("ShowDisplayController", function($scope) {
$scope.message = "This is Display Event";
});
</script>
</html>
當在它是表示defalut,默認網址顯示事件的代碼寫我加載這個頁面是http://localhost:8017/angular/angular5.php#!/DisplayEvent
但當我點擊「添加新事件」鏈接時,網址將更改爲http://localhost:8017/angular/angular5.php#!/DisplayEvent#NewEvent
,視圖部分中沒有任何更改。要手動查看新事件視圖,我正在將URL更改爲http://localhost:8017/angular/angular5.php#!/NewEvent
如何解決此問題。
感謝您的回答,它解決了我的問題。另一個疑問是有什麼辦法從URL完全刪除'#!'? – prudhvi259
給出任何暗示'#!' – prudhvi259
@ prudhvi259你可以參考https://stackoverflow.com/questions/14319967/angularjs-routing-without-the-hash –