AngularJS 和 nodeJs Express:路由和刷新 [英] AngularJS and nodeJs Express: routes and refresh

查看：20
本文介绍了AngularJS 和 nodeJs Express:路由和刷新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的应用程序工作"正常，但是，当我在浏览器中按 F5 时，我的问题出现了.

我的应用是这样组织的:

nodeJs + express，在 Express 中:

app.use(express.static('public'));app.use( app.router );app.use(function(req, res) {res.sendfile(__dirname + '/public/index.html');});

我的角度路线:

app.config(function($locationProvider, $routeProvider) {$locationProvider.html5Mode(真).hashPrefix('!');$routeProvider.when('/', { templateUrl: '/page/home.html'}).when('/activate/:token', { templateUrl: '/page/activate.html'}).otherwise({ redirectTo: '/' });});

一切正常，直到我刷新页面，如果我在本地主机上:1234/activate/999它看起来刷新了页面，但它在控制台中标记了这个错误

错误:模板必须只有一个根元素.是:<!DOCTYPE html><html ng-app=app xmlns="http://www.w3.org/1999/html"><头><title>title</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8">布拉布拉布拉

我所有的 index.html！有什么问题?有什么解决办法吗?

我的家:

<section id="feature_slider" class="">//...</节><div id="展示">//...
<script type="text/javascript" src="/js/index-slider.js"></script>

我激活:

测试

我的 index.html

<html ng-app=app xmlns="http://www.w3.org/1999/html"><头><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"><!-- 样式--><link href="/css/bootstrap.min.css" rel="样式表"><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"/><body class="pull_top"><导航栏>//...</导航栏><ng-view>正在加载...</ng-view><!-- 开始页脚--><页脚 id="页脚">//...</页脚><!--预加载--><script src="/js/jquery-1.10.1.min.js"></script><!-- 脚本--><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><!--角度控制器--><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 服务--><script type="text/javascript" src="/angular/alertBox/messageBoxController.js"></script><!--路由器--><script type="text/javascript" src="/angular/router/router.js"></script>

解决方案

这是在使用返回 index.html 的catch-all"路由时经常遇到的问题(使用 Angular 的 html5 模式时必须这样做).

我不知道您的公用文件夹结构是什么样的，但是您的 Angular 正在请求与实际位置不匹配的 activate.html(由 Express 提供).这可能是因为您的 templateUrl 中有一个前导斜杠:

{ templateUrl: '/page/activate.html'})

但这取决于您的公用文件夹的外观./page/activate.html"假定page"文件夹位于公用文件夹的根目录下.如果不是，那是你的问题.你应该:

{ templateUrl: 'path/relative/to/public/folder/page/activate.html'})

我猜你的情况是这样的:

{ templateUrl: 'views/page/activate.html'})

(在 public/的根目录下似乎不太可能有一个名为page"的文件夹.)

您的 express 中间件尝试处理对

的请求

http://localhost:1234/page/activate.html

但是没有成功处理它，所以你的包罗万象的路由只返回 index.html，它有多个根元素，导致 Angular 抛出一个合适的.Angular 需要 activate.html 但它得到了 index.html.

每当客户端发出 Express 无法处理的请求时，就会发生这种情况，因为全能路由器将返回 index.html.你可以让你的浏览器无限循环，因为它不断加载 index.html，它加载 Angular，它(错误地)加载 index.html，它加载 Angular 等等.

查看您的浏览器对 activate.html 的请求，并使其与 activate.html 的实际位置(由 Express 提供)相匹配.

My app is "working" fine, but, when I press F5 in browser my problem appears.

My app is organized this way:

nodeJs + express, in Express :

app.use(express.static('public'));
app.use( app.router );
app.use(function(req, res) {
    res.sendfile(__dirname + '/public/index.html');
});

my angular routes:

app.config(function($locationProvider, $routeProvider) {
    $locationProvider
        .html5Mode(true)
        .hashPrefix('!');
    $routeProvider
        .when('/', { templateUrl: '/page/home.html'})
        .when('/activate/:token', { templateUrl: '/page/activate.html'})
        .otherwise({ redirectTo: '/' });
});

and everything is working fine until i refresh the page, if i'm on localhost:1234/activate/999 it appear refreshing good the page, but it stamp in console this error

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

all my index.html! what can be the problems? any solutions?
edit:
my home:

<div>
    <section id="feature_slider" class="">
        //...
    </section>

    <div id="showcase">
        //...
    </div>


    <script type="text/javascript" src="/js/index-slider.js"></script>
</div>

mi activate:

<div>
    test
</div>

my 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>

解决方案

This is a problem commonly encountered when using a "catch-all" route that returns index.html (which you have to do when using Angular's html5 mode).

I don't know what your public folder structure looks like, but your Angular is making a request for activate.html that doesn't match its actual location (as served by Express). It may be because you have a leading slash in your templateUrl:

{ templateUrl: '/page/activate.html'})

but that depends on what your public folder looks like. "/page/activate.html" assumes that the "page" folder is at the root of your public folder. If it isn't, then that's your problem. You should have:

{ templateUrl: 'path/relative/to/public/folder/page/activate.html'})

which I'm guessing in your case would be something like:

{ templateUrl: 'views/page/activate.html'})

(It doesn't seem likely there would be a folder called "page" at the root of public/.)

Your express middleware attempts to handle the request for 

http://localhost:1234/page/activate.html

but nothing successfully handles it, so your catch-all route just returns index.html, which has multiple root elements, causing Angular to throw a fit. Angular expected activate.html but it got index.html instead.

This will happen whenever the client makes a request that Express can't handle, because the catch-all router will return index.html. You can get your browser in an infinite loop as it continuously loads index.html, which loads Angular, which (erroneously) loads index.html, which loads Angular, etc.

Look at the request your browser is making for activate.html and make it match the actual location (as served by Express) of activate.html.

这篇关于AngularJS 和 nodeJs Express:路由和刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆