如何用ngRoute创建导航路由

How to create navigation routes with ngRoute?

本文关键字：导航 路由 创建 ngRoute 何用      更新时间：2023-09-26

我正在尝试创建以下简单的导航:

html: 

<html ng-app="myapp">
<body>
    <ul>
    <li><a href="pages/sub1">sub1</a></li>
    <li><a href="pages/sub2">sub2</a></li>
    </ul>
    <div ng-view></div>
    <script src="myscript.js"></script>
</body>
</html>

js: 

var app = angular.module('myapp', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
    $routeProvider.when("/pages/sub1", {
        templateUrl : "templates/sub1.html",
        controller : "sub1Controller"
    }).when("/pages/sub2", {
        templateUrl : "templates/sub2.html",
        controller : "sub2Controller"
    }).otherwise({
        templateUrl : "templates/error.html"
    });
    $locationProvider.html5Mode(true);
});

结果:点击链接时URL路径更改为localhost/pages/sub1，如预期的那样。但是 ng-view没有更新，仍然是空白!为什么?

我认为你应该在锚标记的href字段的url前添加#。

将你的代码替换为:

<li><a href="#/pages/sub1">sub1</a></li>
<li><a href="#/pages/sub2">sub2</a></li>

参考jsFiddle

我做了两个调整:1. 添加/to link:

<li><a href="/pages/sub1">sub1</a></li>

2。为config:

添加requireBase: false
$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});

我也把模板内HTML只是为了使它在片段内工作。满examplae: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>AngularJS Routing</title>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.js"></script>
    </head>
    <body ng-app="myapp">
        <ul>
            <li><a href="/pages/sub1">sub1</a></li>
            <li><a href="/pages/sub2">sub2</a></li>
        </ul>
        <div ng-view></div>
        <script>
            var app = angular.module('myapp', ['ngRoute']);
            angular.module('myapp').controller('sub1Controller', function () {
            });
            angular.module('myapp').controller('sub2Controller', function () {
            });
            app.config(function($routeProvider, $locationProvider) {
                $routeProvider.when("/pages/sub1", {
                    templateUrl: "/templates/sub1.html",
                    controller: "sub1Controller"
                }).when("/pages/sub2", {
                    templateUrl: "/templates/sub2.html",
                    controller: "sub2Controller"
                }).otherwise({
                    templateUrl: "/templates/error.html"
                });
                $locationProvider.html5Mode({
                    enabled: true,
                    requireBase: false
                });
            });
        </script>
        
        <script type="text/ng-template" id="/templates/sub1.html">
            First View
        </script>
        
        <script type="text/ng-template" id="/templates/sub2.html">
            Second View
        </script>
        
        <script type="text/ng-template" id="/templates/error.html">
            404
        </script>
    </body>
</html>

相关文章：