Express + AngularJS + HTML：ng-include不工作（404 - 找不到页错误） [英] Express + AngularJS + HTML: ng-include not working (404 - Page not found error)

问题描述

我刚刚接触 AngularJS 。我试图使用 ng-include 在我的主HTML页面中包含一个外部HTML页面。但问题是我无法包含它并获得404.以下是文件夹结构和代码，

I am new to AngularJS. I am trying to use ng-include to include an external HTML page in my main HTML page. But the problem is I am not able to include it and getting 404. Following is the folder structure and the code,

项目文件夹结构

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进行相同操作时，它不起作用。

1) When I include footer.html page directly in the .jade file then it is working fine. But when I do the same using ng-include in the HTML file it does not work.

2）我也尝试过以下ng-include方式，

2) I have also tried the following ng-include ways,

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

推荐答案

ng-include 是一个客户端包含，所以包含的html文件的路径是相对于客户端的url的感知。

ng-include is a client side include and as such the path to the included html file is relative to the client perception of the url.

由于玉提取你的文件夹结构，并且不提供直接访问您的视图文件夹，您应该将包含的html文件放在 public 文件夹就像任何外部访问文件一样。

Since jade is abstracting your folder structure and does not provide direct access to your views folder you should probably put the included html file on the public folder just as any externaly accessible file.

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

When you include the footer in your .jade file (As per Note 2) you are doing a server side include which uses the server directory structure.

这篇关于Express + AngularJS + HTML：ng-include不工作（404 - 找不到页错误）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！