Question

我写了这段代码。它应该显示页眉和页脚之间的模板。但是代码不起作用。谁能告诉我这是怎么回事？

app.js

angular.module("confusionApp", ['ngRoute'])
.config(function($routeProvider) {
        $routeProvider
            // route for the contactus page
            .when('/contactus', {
                templateUrl : 'contactus.html',
                controller  : 'ContactController'
            })
            // route for the menu page
            .when('/menu', {
                templateUrl : 'menu.html',
                controller  : 'MenuController'
            })
            // route for the dish details page
            .when('/menu/:id', {
                templateUrl : 'dishdetail.html',
                controller  : 'dishDetailController'
            })
            .otherwise('/contactus');
    });

HTML

<!DOCTYPE html>
<html lang="en" ng-app="confusionApp">

<head>
    <title>Ristorante Con Fusion</title>    
    <link href="styles/mystyles.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!--  -->
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#/">
                        <span class="glyphicon glyphicon-home"
                     aria-hidden="true"></span> Home</a></li>
                    <li><a href="#/aboutus">
                        <span class="glyphicon glyphicon-info-sign"
                     aria-hidden="true"></span> About</a></li>
                    <li><a href="#/menu">
                         <span class="glyphicon glyphicon-list-alt"
                     aria-hidden="true"></span> 
                     Menu</a></li>
                    <li><a href="#/contactus">
                     <i class="fa fa-envelope-o"></i> Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>         
    <header class="jumbotron">
    <!-- -->
    </header>
    <ng-view></ng-view>
    <footer class="row-footer">
    <!-- -->
    </footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
</body>

</html>

此代码应获取页眉和页脚之间的模板。但是模板没有显示。

角路由未显示视图

0 个答案: