路由没有在角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正常工作

回答

相关问题