Express + AngularJS + HTML：ng-include不起作用（404 - 页面未找到错误）

Question

我是一个初学者，正在学习使用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>

- Amarnath

Answer 1

我也遇到了类似的问题，而且我对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>

- klimat

---

这似乎是一个不好的主意，因为您的视图文件（jade、ejs或其他）可以公开查看。 - shafeen

Answer 2

ng-include 是一种客户端的包含方式，因此被包含的 HTML 文件路径是相对于客户端 URL 的。

由于 Jade 抽象了你的文件夹结构并且不能直接访问你的 views 文件夹，所以你应该将被包含的 HTML 文件放在 public 文件夹中，就像任何外部可访问的文件一样。

当你在 .jade 文件中包含页脚 (如 Note 2 所述) 时，你正在进行一种服务器端的包含，它使用服务器目录结构。

- Variant

---

+1 很棒.. :) 当放置在公共文件夹中时，它的工作就像魅力一样。 - Amarnath

但是有一个问题，我应该如何在HTML文件中指定视图文件夹的路径，而不是将文件放置在公共文件夹中？ - Amarnath

你不能这样做。它不是公开可访问的。你可以将一个HTML文件包装在另一个视图中，从而使其可访问。 - Variant

好的。我现在已经在public文件夹中创建了一个文件夹，并且可以访问这些文件。最后一个问题是，如何从jade文件中访问public文件夹内的HTML文件。我刚刚尝试了一下，但无法访问它们。 - Amarnath

啊，我明白了。因为Jade直接在views文件夹中查找文件。所以作为一般规则，我使用../public来访问public文件夹中的文件。它起作用了。谢谢。 - Amarnath