Angular表示无限循环
angular express infinite loop
我不知道为什么,但我的express/angular应用程序在加载索引页时导致无限循环…我有我的应用程序设置:
app.configure(function() {
// set up our express application
app.use(express.logger('dev')); // log every request to the console
app.use(express.cookieParser()); // read cookies (needed for auth)
app.use(express.bodyParser()); // get information from html forms
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon(__dirname + '/public/img/favicon.ico'));
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.methodOverride());
});
和我的Angular应用的路由提供商:
var app = angular.module('myApp', ['ngRoute', 'angularFileUpload', 'rcWizard', 'rcForm', 'rcDisabledBootstrap', 'ui.bootstrap']).
config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/login", { templateUrl: "/partials/login.ejs", controller: "LoginCtrl" })
.otherwise({ redirectTo: "/login" });
}
]);
我的指数。包含所有内容的Ejs文件:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/form-styles/rcWizard.css"/>
<link rel="stylesheet" href="css/bootstrap-formhelpers.min.css"/>
</head>
<body>
<div ng-view></div>
<script src="bower_components/ng-file-upload/angular-file-upload-shim.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/ng-file-upload/angular-file-upload.min.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="javascripts/lib/helpers/sel_options.js"></script>
<script src="javascripts/lib/helpers/xml2json.js"></script>
<script src="javascripts/lib/helpers/form-lib/jquery.bootstrap.wizard.js"></script>
<script src="javascripts/lib/helpers/bootstrap-formhelpers.min.js"></script>
<script src="javascripts/lib/helpers/form-src/directives/rcSubmit.js"></script>
<script src="javascripts/lib/helpers/form-src/modules/rcForm.js"></script>
<script src="javascripts/lib/helpers/form-src/modules/rcDisabled.js"></script>
<script src="javascripts/lib/helpers/form-src/modules/rcWizard.js"></script>
<script src="javascripts/app.js"></script>
<script src="javascripts/services.js"></script>
<script src="javascripts/filters.js"></script>
<script src="javascripts/directives.js"></script>
<script src="javascripts/controllers/LoginCtrl.js"></script>
</body>
</html>
最后表示:
app.get('/', function(req, res){
res.render('index');
});
app.get('/partials/login.ejs', function (req, res) {
res.render('/partials/login.ejs', { 'message': 'test 111' });
});
app.get('*', function(req, res){
res.render('index');
});
这看起来真的很简单,但由于某种原因,服务器只是不断地加载所有的脚本文件,一遍又一遍定义在我的索引。ejs文件。我看到的所有例子都是这样的……我尝试了多种不同的路径、设置等。有什么特别的吗?
编辑这是我的登录名。ejs部分:
<% include navbar_public.ejs %>
<div class="container" ng-controller="LoginCtrl">
<script>var message="<%-message%>";</script>
<div class="col-sm-6 col-sm-offset-3">
<h1 class="form-fonts"><span class="fa fa-sign-in"></span> Login</h1>
<!-- show any messages that come back with authentication -->
<div ng-if="message.length > 0" class="alert alert-danger">{{message}}</div>
<!-- LOGIN FORM -->
<form action="/login" method="post">
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" name="email">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password">
</div>
<button type="submit" class="shimmy-button btn btn-success btn-lg">Login</button>
</form>
<hr>
<p>Need an account? <a href="/signup">Signup</a></p>
<p>Or go <a href="/">home</a>.</p>
</div>
</div>
探索四件事:
-
您没有包含
/partials/login.ejs
的副本,因此可能其中存在导致问题的东西 -
当请求/login以外的任何东西时,你要求Angular的路由器加载/login。这种类型的路由设置有时会产生无限循环-尝试不同的"否则"作为测试,以帮助缩小问题。
-
对于除了这两个url之外的任何请求,您都在呈现您的索引页。这意味着,如果请求来的稍微有点奇怪,它就会再次输出index。现在,你的索引页有所有的脚本和JS标签…这让我想到:
-
你在很多/大多数CSS/JS资源上使用了相对路径。您没有
BASE HREF
元标记…这意味着当您的浏览器在/login
上时,它将尝试以/login/css/style.css
等方式请求这些东西。不应该发生,因为这在这一点上只是部分的,但如果上述任何项(或其他任何项)出错,这将会像滚雪球一样。
我强烈建议使用浏览器的网络面板和/或调试工具,如Charles Proxy来检查浏览器发出的请求的确切顺序。这几乎肯定会给你最后一期的线索。
如果您仍然有问题并打算回复,请附上登录模板。Ejs部分,并对不寻常的网络请求进行评论。请更多地谈谈你是如何知道/为什么你说你的应用程序是无限循环的,以及你怀疑发生这种情况的确切位置(服务器,客户端,两者,等等)
- 使用滚动溢出-x进行无限循环
- 从index.html调用函数,该函数无限循环
- 使用jQuery无限循环播放HTML页面幻灯片
- Grunt任务没有加载,获得无限循环
- 如何在不进入无限循环的情况下将网站重定向到Facebook画布URL
- Backbone+RequireJS+Mediator模式导致视图逻辑短路和无限循环
- jQuery无限循环,动画化许多项目
- 如何避免试图用php+jquery显示php起始页的无限循环
- 6502仿真增强型基本无限循环$C000至$E0ED
- Angular ngRoute导致无限循环和堆栈溢出
- Jquery:无限循环和暂停
- 数组数组:无限循环
- MeteorJS使用流星调用和流星方法时的无限循环
- 如何无限循环数据集字符串
- jquery在无限循环中运行
- 遍历对象会导致无限循环
- 为什么内部Javascript循环会阻止外部循环中断(即无限循环)
- 角度编译指令似乎进入了无限循环
- 显示随机数js的无限循环
- Angular表示无限循环