Question

我对角度模板完全不熟悉，我正在尝试在我的网页上工作。所以我希望能够在不刷新页面的情况下导航到不同的html页面。我按照w3schools的步骤，但它似乎没有工作。这是下面的代码

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/borrower", {
    templateUrl : "../borrower.html"
})
.when("/", {
    templateUrl : "administrator.html"
})
.when("/book", {
    templateUrl : "../book.html"
})
.when("/author", {
    templateUrl : "../author.html"
})
.when("/publisher", {
    templateUrl : "../publisher.html"
})
.when("/loans", {
    templateUrl : "../loans.html"
});
});

<ol class="menunav"><a href="#/!"><span class="menu-text">Administrator</span></a></ol>
        <ol class="menunav"><a href="#!borrower"><span class="menu-text">Borrowers</span></a></ol>
        <ol class="menunav"><a href="#!book"><span class="menu-text">Books</span></a></ol>
        <ol class="menunav"><a href="#!author"><span class="menu-text">Authors</span></a></ol>
        <ol class="menunav"><a href="#!publisher"><span class="menu-text">Publishers</span></a></ol>
        <ol class="menunav"><a href="#!loans"><span class="menu-text">Loans</span></a></ol>

我已将ng-app =“myApp”添加到顶部的body标签，我添加了所需的库我没有收到任何错误。我在administrator.html页面上，我已将上述代码添加到此文件中。但是我无法使用上面的角度代码到达其他页面。正如我所说，我是新手，所以它可能是一个明显的解决方案，但我不确定我做错了什么。

感谢任何帮助，谢谢

Answer 1

您需要一个index.html，其中包含您发布的代码。

在此文件中，您还需要一个基本标记并设置ng-view。 https://docs.angularjs.org/api/ngRoute/directive/ngView

示例：

<强>的index.html

<!doctype html>
<html>
<head>
<title>myApp</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider) {
        $routeProvider
        .when("/borrower", {
            templateUrl : "../borrower.html"
        })
        .when("/", {
            templateUrl : "administrator.html"
        })
        .when("/book", {
            templateUrl : "../book.html"
        })
        .when("/author", {
            templateUrl : "../author.html"
        })
        .when("/publisher", {
            templateUrl : "../publisher.html"
        })
        .when("/loans", {
            templateUrl : "../loans.html"
        });
    });
</script>
<base href="/">
</head>
<body xmlns:ng="http://angularjs.org" id="ng-app" data-ng-app="myApp">
    <div>
        <ol class="menunav"><a href="#/!"><span class="menu-text">Administrator</span></a></ol>
        <ol class="menunav"><a href="#!borrower"><span class="menu-text">Borrowers</span></a></ol>
        <ol class="menunav"><a href="#!book"><span class="menu-text">Books</span></a></ol>
        <ol class="menunav"><a href="#!author"><span class="menu-text">Authors</span></a></ol>
        <ol class="menunav"><a href="#!publisher"><span class="menu-text">Publishers</span></a></ol>
        <ol class="menunav"><a href="#!loans"><span class="menu-text">Loans</span></a></ol>
        <div class="templateLoadsHere" data-ng-view></div>
    </div>
</body>
</html>

获得角度模板路由不起作用，但没有显示错误

1 个答案: