AngularJS路由不起作用

Question

我是AngularJS的新手，目前正在构建一个小型应用程序。 我想要我的URL像这样的/ index（不带.html）。 我试图为此使用NgRoute，但似乎效果不佳。 当我去/机构时，它说路线不存在。 这是我的代码：

app.js

var app = angular.module('khApp', ['ngRoute','establishmentModule', 'queryModule', 'buildingBlockModule', 'categoryModule']);
app.config(['$routeProvider', function($routeProvider)
{
  $routeProvider
    .when('establishments', {controller:'testController', templateUrl: '../html/establishments.html'})

}]);

app.controller('testController', ['$http', function($http)
{


}]);

index.html

    <div  ng-controller="testController as test" class="container">
        hi 
        <a href="establishments">
            <button class="btn btn-default">Start</button>
        </a>
    </div>

  <ng-view></ng-view>

<script type="text/javascript" src="../../bower_components/angular/angular.js"></script> 
<script type="text/javascript" src="../../bower_components/angular-route/angular-route.js"></script> 
<script type="text/javascript" src="../js/app.js"></script>
<script type="text/javascript" src="../js/buildingblock.js"></script>
<script type="text/javascript" src="../js/category.js"></script>
<script type="text/javascript" src="../js/establishment.js"></script>
<script type="text/javascript" src="../js/query.js"></script> 


</body>
</html>

我究竟做错了什么？ 提前致谢！

Answer 1

根据路由器的配置方式，通常需要以斜杠开头的目标路由如下：

app.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider
            .when('establishments', {
                controller:'testController',
                templateUrl: '../html/establishments.html'
            });
}]);

另外，在您的HTML中，我认为您的HTML锚标记需要从哈希导航开始，如下所示：

<a href="#/establishments">
    <button class="btn btn-default">Start</button>
</a>

参考： AngularJS文档教程7-路由和多视图

Answer 2

AngularJS路由利用片段标识符（URL中的# ）获取其路由。 那是因为它在不导致浏览器请求新页面的情况下无法操纵完整的URL，因此使其成为SPA。

因此，您需要请求的URL应该为<path to root>#/establishments 。 假设index.html在/application/app/html ，则请求的URL将是：

/application/app/html/index.html#/establishments

如果您还希望支持URL localhost:port/application/app/html/establishments则需要配置服务器端路由以执行重定向到/application/app/html/index.html#/establishments 。

Answer 3

＃/场所是锚标记中所需要的

<a href="#/establishments">
<button class="btn btn-default">Start</button>
</a>

您的路线将如下所示：

app.config(['$routeProvider',
function($routeProvider) {
    $routeProvider
        .when('establishments', {
            controller:'testController',
            templateUrl: '../html/establishments.html'
        });
}]);