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

我是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文件的path与客户端对url的感知相关。

由于玉是抽象的文件夹结构，并不提供直接访问您的views文件夹，你应该把所包含的HTML文件在公用文件夹就像任何externaly可访问的文件。

当你在.jade文件中包含页脚时（按照注2），你正在做一个使用服务器目录结构的服务器端include。

Answer 2

我也有类似的问题，我也是新的Angular和节点:)我不知道我的解决scheme是安全的，所以如果它不让我知道这一点。

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