Express + AngularJS + HTML：ng-include not working（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>

Answer 1

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

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

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

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