Express + AngularJS + HTML:ng-include 不起作用(404 - 找不到页面错误)

Posted

技术标签:

【中文标题】Express + AngularJS + HTML:ng-include 不起作用(404 - 找不到页面错误)【英文标题】:Express + AngularJS + HTML: ng-include not working (404 - Page not found error) 【发布时间】:2014-12-07 18:10:00 【问题描述】:

我是 AngularJS 的新手。我正在尝试使用ng-include 在我的主 html 页面中包含一个外部 HTML 页面。但问题是我无法包含它并得到 404。以下是文件夹结构和代码,

项目文件夹结构:

buttonClick.jade(这是起始页。)

doctype html
html(ng-app)
    head
        link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
        link(rel='stylesheet', href='/stylesheets/style.css')
        script(src='/javascripts/angular.min.js')
    body(class="mainPage")
        //include footer.html
        include pageinclude.html

pageinclude.html

<div>
    <div>Include Page Demo</div>
    <div ng-include="'footer.html'"></div>
</div>

注意:

1) 当我在 .jade 文件中直接包含 footer.html 页面时,它工作正常。但是当我在 HTML 文件中使用 ng-include 执行相同操作时,它不起作用。

2) 我也尝试过以下 ng-include 方式,

<div ng-include="'footer.html'"></div>
<ng-include src="'footer.html'"></ng-include>

【问题讨论】:

【参考方案1】:

ng-include 是客户端包含,因此包含的 html 文件的路径与客户端对 url 的感知有关。

由于翡翠正在抽象您的文件夹结构并且不提供对您的views 文件夹的直接访问,您可能应该将包含的html 文件放在public 文件夹中,就像任何外部可访问的文件一样。

当您在 .jade 文件中包含页脚时(根据注释 2),您正在执行使用服务器目录结构的服务器端包含。

【讨论】:

+1 非常棒 .. :) 放在公共文件夹中时效果很好。 但是有一个问题,我应该如何在 HTML 文件中提供视图文件夹的路径,而不是将文件放在公用文件夹中? 你不能。它不可公开访问。您可以将 html 文件包装在另一个视图中,从而使其可访问。 对不起,我没有明白这一点..You can wrap an html file in another view and thus make it accessible 假设您想将 footer.html 保留在 views 文件夹中,无论出于何种原因。然后,您可以创建一个仅提供 footer.html 的新视图。在您的主 html 文件中,使用 ng-include 和新视图的 url。【参考方案2】:

我也有类似的问题,而且我也是 Angular 和 Node 的新手 :) 我不确定我的解决方案是否安全,所以如果它不让我知道。

我已经通过使用 express.static 中间件公开部分目录来解决它。

所以在app.js 中添加类似的内容:

app.use(require('less-middleware')(path.join(__dirname, 'public'))); //common
app.use('/views', express.static(__dirname + '/views')); //serve views directory as assets

然后您可以从客户端访问您的部分:

<div ng-include="'/views/footer.html'"></div>

【讨论】:

这似乎是个坏主意,因为您的视图文件(jade、ejs 等)可以公开查看

以上是关于Express + AngularJS + HTML:ng-include 不起作用(404 - 找不到页面错误)的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Express、AngularJS、Socket.io 广播和获取通知?

使用 Express 为 AngularJS 渲染一个 .ejs 模板并使用 AngularJS $scope 中的数据

AngularJS 的 $routeProvider templateUrl 总是使用 Express 返回 404

请求新页面时如何将 AngularJS 路由与 Express (Node.js) 一起使用?

如何在 Mongoose 中更新/更新文档/数据? Passport MongoDB、Express、AngularJS、Nodejs

使用 AngularJS 的 Paypal Express 结帐