Question

我是AngularJS的初学者，目前正在使用ng-view进行练习。但是，我似乎无法在我的简单项目中使用ng-view。

由于某种原因，该网页仅显示我的h1标头“ Guru99全球事件”和我的两个链接。它既不显示“这是添加新事件”，也不显示“这是显示事件”。（它基本上不会显示整个ng-view div。）我目前不确定如何进行操作，因此如果有人可以帮助我，那就太好了。

当前显示的内容

What is currently shows

我想显示的内容

What I want to show

HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
    <script src="lib/bootstrap.js"></script>

</head>
<body ng-app="sampleApp">

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul><li><a href="#!NewEvent"> Add New Event</a></li>
        <li><a href="#!DisplayEvent"> Display Event</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var app = angular.module('sampleApp',["ngRoute"]);
    app.config(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 to Add a new Event";

    });
    app.controller("ShowDisplayController",function($scope){

        $scope.message = "This is display an Event";

    });
</script>
</body>
</html>

add_event.html

<h2>Add New Event</h2>
{{message}}

show_event.html

<h2>Show Event</h2>
{{message}}

如何正确使用ng-view

0 个答案: