Question

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

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未更新并保持空白！为什么呢？

Answer 1

我认为你必须在锚标记的href字段中的url之前添加＃。

用以下代码替换您的代码：

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

请参阅此jsFiddle

Answer 2

我做了两次调整： 1.添加/链接：

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

2。添加了requireBase：false to config：

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

我还在HTML中添加了模板，以使其在代码段内工作。完整的例子：

＆＃13;

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

＆＃13;

如何使用ngRoute创建导航路线？

2 个答案: