可以路由到 angular 中的不同模板

Question

下面是一个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 页不会显示任何内容。

Answer 1

您可以使用 redirectTo() 方法和 otherwise() 方法。此外，必须将 href="#" 放在 <a> tag 下。

<!DOCTYPE html>
 <html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

<body ng-app="myApp">

<p><a href="#/!">Main</a></p>

<a href="#!red">Red</a>
<a href="#!green">Green</a>

<a href="#">Oranger</a>
<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.htm"
    })
    .when("/red", {
        templateUrl : "red.htm"
    })
    .when("/green", {
        templateUrl : "green.htm"
    })
  .otherwise({redirectTo:'/'});
});
</script>

<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>

Answer 2

您在 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>

Answer 3

有几个错误：首先，在 href 中，您使用了大写字母 P，而在路由定义中，它是小写字母，即 p，第二，您不需要使用 ! 在 href 中，即它应该像 href=#page1，第三个是模板应该是字符串，即在 single/double 引号下。

<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>

可以路由到 angular 中的不同模板

could route to different templates in angular

html

angularjs

angular2-routing