时间戳

首页 > 解决方案 > 可以以角度路由到不同的模板

html - 可以以角度路由到不同的模板

问题描述

下面是一个 HTML 页面，点击第 1 页时无法获取内容

<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
                <script src="JavaScript.js"></script>
</head>
<body ng-app="myapp">
    <div class="Container">
        <nav class="navbar navbar-default">
            <ul class="navbar navbar-nav">
                <li>
                    <a href="#!Page1">Page 1</a>
                    <a href="#!Page2">Page 2</a>
                    <a href="">Page 3</a>
                </li>
            </ul>
        </nav>
    </div>

    <div ng-view></div>

    <script>
        var app = angular.module("myapp", ["ngRoute"]);

app.config(function ($routeProvider){
    $routeProvider.when("/page1", {
        template :  <h1>Page 1</h1>
    })
        .when("/page2", {
            template: <h1>Page 2</h1>
        })
        .otherwise({
            template: <h1>note found</h1>
        })
});
    </script>

</body>
</html>

上面的代码有没有错误。是参考问题。

有人可以纠正吗？

第 3 页不会显示任何内容。

标签： htmlangularjsangular2-routing

解决方案

您在 javascript 代码中围绕模板的引号漏掉的第一个错误：

$routeProvider.when('/page1', {
    template :  '<h1>Page 1</h1>'
})
.when("/page2", {
    template: '<h1>Page 2</h1>'
})
.otherwise({
    template: '<h1>note found</h1>'
});

并且不需要在链接中使用感叹号：

<a href="#/page1">Page 1</a>
<a href="#/page2">Page 2</a>
<a href="#">Page 3</a>

推荐阅读