html - Express + AngularJS + HTML : ng-include not working (404 - Page not found error)

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) 当我将 footer.html 页面直接包含在 .jade 文件中时，它工作正常。但是，当我在 HTML 文件中使用 ng-include 执行相同操作时，它不起作用。

2) 我也试过下面的 ng-include 方式，

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

Answer 1

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

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

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