路由沒有在角JS正常工作

這裏是我的代碼，
路由沒有在角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如何解決此問題。

來源

2017-07-14 prudhvi259

您應該提供鏈接前綴爲#!的鏈接。

<li><a href="#!NewEvent">Add New Event</a></li> 
<li><a href="#!DisplayEvent">Display Event</a></li>

來源

2017-07-14 07:21:38

感謝您的回答，它解決了我的問題。另一個疑問是有什麼辦法從URL完全刪除'＃！'？ – prudhvi259

給出任何暗示'＃！' – prudhvi259

@ prudhvi259你可以參考https://stackoverflow.com/questions/14319967/angularjs-routing-without-the-hash –

當我在您的代碼中刪除ngRoute然後它在我身邊工作。

這裏是woking Fiddle

來源

2017-07-14 07:37:06

路由沒有在角JS正常工作

回答

相關問題