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>

当我按照代码中的说明加载此页面时，它通过defalut显示显示事件，默认网址为http://localhost:8017/angular/angular5.php#!/DisplayEvent
但是当我点击添加新事件链接时，网址将更改为http://localhost:8017/angular/angular5.php#!/DisplayEvent#NewEvent，并且视图部分中没有任何更改。要手动查看新的事件视图，我要将网址更改为http://localhost:8017/angular/angular5.php#!/NewEvent如何解决此问题。

Answer 1

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

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

Answer 2

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

这是woking Fiddle

路由在角度js中无法正常工作

2 个答案: