路由在 angular js 中无法正常工作

Question

这是我的代码，

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

当我按照代码中的方式加载此页面时，它默认显示显示事件，默认 url 是 http://localhost:8017/angular/angular5.php#!/DisplayEvent
但是当我单击添加新事件 link 时，url 正在更改为 http://localhost:8017/angular/angular5.php#!/DisplayEvent#NewEvent 并且视图部分没有任何变化。要手动查看新事件视图，我将 url 更改为 http://localhost:8017/angular/angular5.php#!/NewEvent 如何解决此问题。

Answer 1

您应该提供带有 #! 前缀的 link。

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

Answer 2

当我在您的代码中删除 ngRoute 时，它就在我这边工作。

这里是woking Fiddle

路由在 angular js 中无法正常工作

Routing is not working properly in angular js

javascript

angularjs

angular-routing