个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
我的应用“运行”良好，但是，当我在浏览器中按 F5 时，我的问题出现了。
我的应用程序是这样组织的:
nodeJs + express，在 Express 中:
app.use(express.static('public'));
app.use( app.router );
app.use(function(req, res) {
res.sendfile(__dirname + '/public/index.html');
});
我的 Angular 路线:
app.config(function($locationProvider, $routeProvider) {
$locationProvider
.html5Mode(true)
.hashPrefix('!');
$routeProvider
.when('/', { templateUrl: '/page/home.html'})
.when('/activate/:token', { templateUrl: '/page/activate.html'})
.otherwise({ redirectTo: '/' });
});
在我刷新页面之前一切正常，如果我在 localhost:1234/activate/999它看起来刷新了页面，但它在控制台中标记了这个错误
Error: Template must have exactly one root element. was:<!DOCTYPE html>
<html ng-app=app xmlns="http://www.w3.org/1999/html">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
bla
bla
bla
我所有的 index.html!可能是什么问题？有什么解决办法吗？
编辑:
我的家:
<div>
<section id="feature_slider" class="">
//...
</section>
<div id="showcase">
//...
</div>
<script type="text/javascript" src="/js/index-slider.js"></script>
</div>
激活:
<div>
test
</div>
我的 index.html
<!DOCTYPE html>
<html ng-app=app xmlns="http://www.w3.org/1999/html">
<head>
<title>tite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="/css/bootstrap-overrides.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/theme.css">
<link rel="stylesheet" href="/css/index.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/lib/animate.css" media="screen, projection">
<link rel="stylesheet" href="/css/sign-in.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/css/myCss.css" type="text/css"/>
</head>
<body class="pull_top">
<navbar>
//...
</navbar>
<ng-view> Loading...
</ng-view>
<!-- starts footer -->
<footer id="footer">
//...
</footer>
<!--Preload-->
<script src="/js/jquery-1.10.1.min.js"></script>
<!-- Scripts -->
<script src="/js/bootstrap.min.js"></script>
<script src="/js/theme.js"></script>
<!--Angular-->
<script type="text/javascript" src="/js/angular.min.js"></script>
<!--<script type="text/javascript" src="/js/angular-ui.min.js"></script>-->
<script type="text/javascript" src="/js/ui-bootstrap-0.5.0.min.js"></script>
<script type="text/javascript" src="/angular/app.js"></script>
<!--Angular Controller-->
<script type="text/javascript" src="/angular/login/loginController.js"></script>
<script type="text/javascript" src="/angular/menuNavBar/menuController.js"></script>
<script type="text/javascript" src="/angular/login/logOutController.js"></script>
<script type="text/javascript" src="/angular/login/registerController.js"></script>
<!--Angular Services-->
<script type="text/javascript" src="/angular/alertBox/messageBoxController.js"></script>
<!--Router-->
<script type="text/javascript" src="/angular/router/router.js"></script>
</body>
最佳答案
这是使用返回 index.html 的“包罗万象”路由时经常遇到的问题(使用 Angular 的 html5 模式时必须这样做)。
我不知道您的公用文件夹结构是什么样的，但是您的 Angular 正在请求 activate.html，但它与其实际位置(由 Express 提供)不匹配。这可能是因为您的 templateUrl 中有一个前导斜杠:
{ templateUrl: '/page/activate.html'})
但这取决于您的公用文件夹的外观。 “/page/activate.html”假定“page”文件夹位于公共(public)文件夹的根目录。如果不是，那是你的问题。你应该:
{ templateUrl: 'path/relative/to/public/folder/page/activate.html'})
我猜你的情况应该是这样的:
{ templateUrl: 'views/page/activate.html'})
(似乎不太可能在 public/的根目录下有一个名为“page”的文件夹。)
您的快速中间件尝试处理
的请求http://localhost:1234/page/activate.html
但没有任何东西成功处理它，所以你的包罗万象的路线只返回 index.html，它有多个根元素，导致 Angular 抛出一个合适的。 Angular 需要 activate.html，但得到的是 index.html。
每当客户端发出 Express 无法处理的请求时，就会发生这种情况，因为 catch-all 路由器将返回 index.html。你可以让你的浏览器进入无限循环，因为它不断加载 index.html，它加载 Angular，它(错误地)加载 index.html，它加载 Angular，等等。
查看您的浏览器对 activate.html 发出的请求，并使其与 activate.html 的实际位置(由 Express 提供)相匹配。
关于javascript - AngularJS 和 nodeJs Express : routes and refresh，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18240288/
25
4
0
我的 React 项目需要更新 nodejs。那么我如何将我的 Node js 重新安装到 Ubuntu 16.04 中的最新版本。 我当前的 Node 版本是 node -v v6.0.0 我当前的
我正在寻找逐步调试 NodeJS 服务器代码的有效方法。目前我使用了几十个console.log()，这非常困难。完美的工具可以让我检查堆栈中每个变量的值并逐行跟踪我的程序。首选操作系统 = MacO
我的网站上有以下两个文件: firebase.js gridsome-server.js firebase.js 是一个“常规”javascript 文件，包含以下内容: import firebas
我有一个nodejs应用程序从文件夹A执行，二进制X也在文件夹A中执行(使用子进程exec)。二进制 X 在文件夹 A 中生成输出文件 O，因此始终从调用位置开始。 我需要nodejs应用程序来在仲裁
我有以下nodeJS服务器，它似乎工作正常。我想编写一个客户端，从服务器接收消息并根据消息调用一些 JS。 涉及的步骤是: 用户访问网址http://server.xyz.com:8080/pa no
我想从 Node 服务器进行其余 api 调用。我目前脑子里有请求模块。 您是否会建议用于 Nodejs 中生产实践的 REST 调用(get/post)的任何其他最佳模块？ 问候，公羊 最佳答案 R
我正在尝试像这样使用 mainModule: const { mainModule } = require('process'); module.exports = path.dirname(main
我现在对那些版本号真的很困惑。我正在计划一个新项目，想知道这两个版本之间有什么区别。这两个版本之间似乎有很大的跳跃，但现在我找不到区别。 使用 4.1 版安全吗？ 感谢您的帮助! 最佳答案 跳转到 v
我试图找到我的问题的解决方案，但找不到，并且正在寻找一些“最佳实践示例”。我有一个 nodejs express 应用程序，我的函数在文件中拆分。例如我有这个 Controller (oktacont
这看起来像是一个非常简单的问题，但作为一个 JS 初学者，我想知道是否可以在 webextension 中使用 NodeJS 模块(例如我想使用这个:https://github.com/yaronn
我有一个文件。a.js class A{ constructor(name){ this.name = name; } displayName(){ conso
我想做的是这样的: node x.js | node y.js 文件 x.js 只是打印一个字符串: console.log("hi"); 文件 y.js 旨在通过 process.stdin 获取字
对于这个新的nodejs debugger I am working on我想对显示的源代码行进行着色。有什么关于 npm 使用的建议吗？ 有很多语法荧光笔，但使这种情况有点不同的是 输出是到终端；它
有没有什么方法可以从 ejs View 中引用包含在 node_modules 文件夹中的 Nodejs 库？ 我正在使用 expressjs 并且我的客户端库由 /public 文件夹提供，如下所示
我是 NodeJS 的新手，我正在尝试根据 NodeJS 站点上的指南在 NodeJS 中创建一个服务器。我已经在我的电脑上安装了 NodeJS 并使用以下代码制作了 app.js 文件。 const
我有一个 nodejs-express 服务器 (1) 与 mongodb 通信，还有一个 web 服务器 (2) 在 nodejs-express 和 Angularjs 中。我正在尝试发出 pos
我一直在解决(firebase 和 nodejs)问题，这是该问题的第四部分，如何在登录到 server.js 后传递数据 我已经尝试过this但未能使其正常工作。 基本上，我正在尝试将用户idTok
每次页面刷新时，NodeJS 都会在套接字上多次写入数据。当我刷新页面时，nodejs 服务器写入套接字的计数增加，在多个页面刷新时，写入计数固定为 3。 请检查控制台输出是否有此奇怪的响应。请提出同
我在尝试更新文件夹并再次部署其内容时遇到问题。我必须使用 NodeJS 并已获得端口 8080 来使用。我尝试创建一个 php 脚本(update.php): 现在我想启动NodeJS脚本进行更新，
我不明白java多线程系统和Nodejs多线程系统在性能和资源共享方面的区别。由于 NodeJS 为您的程序使用事件循环单线程，但在幕后，它将任务分配给不同的线程，如文件读取或数据库查询。所以它使用多
我是一名优秀的程序员,十分优秀！