Javascript AngularJS和nodeJs Express：路由和刷新_Javascript_Node.js_Angularjs_Express_Angularjs Routing

Javascript AngularJS和nodeJs Express：路由和刷新

javascript node.js angularjs express

Javascript AngularJS和nodeJs Express：路由和刷新,javascript,node.js,angularjs,express,angularjs-routing,Javascript,Node.js,Angularjs,Express,Angularjs Routing,我的应用程序“正常工作”，但当我在浏览器中按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($loc

我的应用程序“正常工作”，但当我在浏览器中按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(true)
        .hashPrefix('!');
    $routeProvider
        .when('/', { templateUrl: '/page/home.html'})
        .when('/activate/:token', { templateUrl: '/page/activate.html'})
        .otherwise({ redirectTo: '/' });
});

在我刷新页面之前一切都正常，如果我在本地主机上：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！有什么问题吗？有什么解决办法吗？
编辑：
我家：


//...
//...

mi激活：

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


那儿
//...
加载。。。
//...

尝试使用指定templateUrl和视图的

根目录的绝对路径
例如，假设您已配置并且视图
位于公用
文件夹中
app.set('views', __dirname + '/public');

然后将模板的路径更改为
/public/page/home.html

这是在使用返回index.html的“catch-all”路由时经常遇到的问题（在使用Angular的html5模式时必须这样做）
我不知道您的公用文件夹结构是什么样子，但您的文件夹正在请求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

但是没有任何东西能够成功地处理它，所以您的catch-all路由只返回index.html，它有多个根元素，导致Angular抛出一个fit。Angular需要activate.html，但它得到了index.html
每当客户端发出Express无法处理的请求时，就会发生这种情况，因为catch all路由器将返回index.html。当浏览器连续加载index.html、加载Angular、加载index.html（错误地）和加载Angular等时，可以使浏览器处于无限循环中
查看浏览器对activate.html的请求，并使其与activate.html的实际位置（由Express提供）匹配。
模板需要一个且只有一个根元素才能将控制器绑定到-如果您向我们展示activate.html和index.html，可能会有所帮助。你在任何地方使用过ng view指令吗？你是对的，我正在编辑我的问题，不是吗，它用所有index.html回答我，而我只包括home.html和activate.html@很明显，在我回答你的问题之前，你没有发布所有的模板。你能发布index.html吗？我可以看到很多不正确的语法，比如ngapp=app，app应该被引用。确保你修复了所有这些类型的愚蠢错误以清除错误警报。但我正在学习，你能帮我说出哪种错误吗？ng app=app应该是ng app=“app”，然后呢？谢谢，我认为最好也使用ng视图作为属性：嘿！谢谢你的回答！对不起，这些天我不在家，我有一个问题，如果请求是错误的，它不应该以正确的方式显示？正确的？？因为控制台打印错误，但页面显示正确！我偶然发现了错误！
http://localhost:1234/page/activate.html