使 AngularJS 路由正常运行需要哪些 Web 服务器配置？答案

【问题标题】：What web server configuration is required to make AngularJS routing function correctly?使 AngularJS 路由正常运行需要哪些 Web 服务器配置？
【发布时间】：2013-06-26 19:07:42
【问题描述】：

我正在使用 AngularJS 路由来提供单页应用程序。配置是：

var ewiApp = angular.module("ewi", []);
ewiApp.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/home',
        {
            templateUrl: '/private/app/index.html'
        });
    $routeProvider.when('/alarms/active',
        {
            templateUrl: '/private/app/alarms/partials/active.html',
            controller:  'ActiveAlarmListCtrl'
        });
    $routeProvider.otherwise({redirectTo: '/home'});
    $locationProvider.html5Mode(true).hashPrefix('!');
});

我遇到的问题是，当我输入“/”或“/abc”或“/alarms/active”以外的任何内容时，angularjs 库进入无限循环，试图加载 index.html 文件和它的所有 javascript、css 和图像文件一遍又一遍。我注意到每个文件请求都添加了一个时间戳。我似乎 angularjs 试图不使用已经加载的文件的缓存版本。这将永远持续下去，直到我关闭浏览器选项卡。

我包括以下 javascript 库以及我们自己的一些库：

<script src="/lib/jquery/jquery-1.10.1.js"></script>
<script src="/lib/jquery/jquery-migrate-1.2.1.js"></script>
<script src="/lib/bootstrap/bootstrap.min.js"></script>
<script src="/lib/angular/angular.js"></script>

我看过一些讨论如何设置 AngularJS 路由的在线视频，它们都提到还需要一些服务器配置，但我没有看到任何具体确定服务器配置需要的内容。我想知道 angularjs 库中的无限循环问题是否与我需要在服务器上更改的内容有关？我正在使用 lighttpd 网络服务器。

我想知道是否有其他人遇到过这个问题？

【问题讨论】：

什么版本的 Angular？
我正在使用 AngularJS v1.0.7
我刚试过AngularJS v1.1.5，死循环文件重载问题依然存在。
你必须把它放在 Plunkr 中，人们才能真正看到正在运行的代码。

标签： caching angularjs routing timestamp infinite-loop

【解决方案1】：

我不完全确定这是问题所在，但通常我不会说 ;在每条路线之后。像这样链接它们：

var ewiApp = angular.module("ewi", []);
ewiApp.config(function ($routeProvider, $locationProvider) {
    $routeProvider
    .when('/home',
    {
        templateUrl: '/private/app/index.html'
    })
    .when('/alarms/active',
    {
        templateUrl: '/private/app/alarms/partials/active.html',
        controller:  'ActiveAlarmListCtrl'
    })
    .otherwise({redirectTo: '/home' })

});

类似的东西应该可以工作。

【讨论】：

谢谢，我试过了，但无限重载问题依然存在。
很有趣，您设置了 REST 服务器？还是您所说的服务器配置？
我不认为我的服务器是 REST 服务器。我看过的关于 AngularJS 路由的视频说，当指定未在 AngularJS $routeProvider.when() 调用中设置的 URL 时，必须设置服务器以提供 index.html 文件。我不确定我需要在服务器上做什么。现在它在指定未知 URL 时返回 index.html 文件的内容。我注意到重定向到 index.html 文件不起作用，所以我只是为任何未知请求返回该文件。

【解决方案2】：

好吧，我觉得自己很傻，但是我发现了当输入“/home” URL 或触发“otherwise”子句时，AngularJS 库进入无限循环的原因。

问题是由于我对以下语句的 templateURL 的规范：

$routeProvider.when('/home', {
    templateUrl: '/private/app/index.html'
});

由于主（单页）页面已经是“/private/app/index.html”文件，该规范导致“index.html”文件的内容被加载到标签中同一文件的部分。然后这会导致重新加载所有指定的链接，然后包含页面中的标记导致请求加载另一个“index.html”页面，一遍又一遍。

解决方法是将上面的代码更改为：

$routeProvider.when('/home', {
    templateUrl: '/private/app/home/partials/home.html',
    controller: 'HomeCtrl"
});

现在，每个指定的“when()”网址、“/home”网址和任何虚假网址（如“/abcdef”）都可以正常工作。

【讨论】：