以下 index.html 页面会导致无限循环。重现:
- 在(本地或远程)Web 服务器上下载下面链接的 github 项目(我已经在 plunker 上尝试过,并且没有发生无限循环)
- 从您的浏览器请求它。
- 点击页面上的 p1p2 链接。
无限循环开始。在服务器端,日志产生:
server request for * handled
GET /p1/p2 304 8ms
server request for * handled
GET /p1/partials/template1 304 4ms
注意这里/p1
前面的/partials/template1
。那个是从哪里来的?这导致了无限循环,因为 AngularJS 在此 url 处找不到模板并因此进入循环。缩短此/p1/p2
AngularJS 路线以/p1
以某种方式消除问题。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script>document.write('<base href="' + document.location + '" />');</script>
</head>
<body ng-app="minimalApp">
<p>Index Page That Contains ng-view below..</p>
<div ng-view></div>
<p><a ng-href="p1/p2">p1p2</p>
<p><a ng-href="#">#</p>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script>
'use strict';
var minimalApp = angular.module('minimalApp', []).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/template1',
controller: IndexCtrl
}).
when('/p1/p2', {
templateUrl: 'partials/template2',
controller: T2Ctrl
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
function IndexCtrl($scope) {
}
function T2Ctrl($scope) {
}
</script>
</body>
</html>
(我把html放在这里是为了方便,即使模板是通过jade创建的)
我使用的服务器是 node/express。完整的项目在 github 上。
并且嵌入了模板并且有效的同一个 html 页面在这里。