Fatal编程技术网

Javascript 角表示无限循环

javascript angularjs express

Javascript 角表示无限循环,javascript,angularjs,express,url-routing,Javascript,Angularjs,Express,Url Routing,我不知道为什么，但我的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 cookie

我不知道为什么，但我的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" });
        }
    ]);
我的index.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>
这看起来非常简单，但出于某种原因，服务器只是不断地反复加载index.ejs文件中定义的所有脚本文件。我看到的所有例子都是这样设置的。。。我尝试了多种不同的路径、设置等。有什么突出的地方吗

编辑 这是我的login.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的副本，因此可能是其中的某些内容导致了问题

您要求Angular的路由器在请求除/login以外的任何内容时加载/登录。这种类型的路由设置有时会创建无限循环-尝试不同的“否则”测试以帮助缩小问题范围

对于除这两个URL之外的任何请求，都将呈现索引页。这意味着，如果请求甚至有点奇怪，它将再次转储索引。现在，您的索引页上有所有这些脚本和JS标记。。。这让我想到：

您在许多/大部分CSS/JS资源上使用相对路径。您没有基本HREF元标记。。。这意味着当浏览器打开/login时，它将尝试以/login/css/style.css等形式请求这些内容。这不应该发生，因为在这一点上这只是一个部分，但如果上述任何一项或任何其他项目出现问题，这将是雪球

我强烈建议您使用浏览器的网络面板和/或Charles Proxy之类的调试工具来查看浏览器发出的请求的确切顺序。这几乎肯定会给你带来最后一期的线索

如果您仍有问题并计划回复，请包括login.ejs部分的模板，以及有关异常网络请求的注释。另外，请详细谈谈您如何知道/为什么您说您的应用程序是无限循环的，以及您怀疑服务器、客户端、两者都在发生这种情况的确切位置。

PS：我过去用IFRAMEs对自己做过这件事，但在这里用partials也会遇到同样的问题。如果Angular在获取login.ejs时以index.ejs结束，则它将其视为HTML。这将导致它将index.ejs粘贴在index.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>