Geek Answers Handbook

Express + AngularJS + HTML: ng-include does not work (404 - Page Error Not Found)

I am new to AngularJS . I am trying to use ng-includeto include an external HTML page on my main HTML page. But the problem is that I can’t turn it on and get 404. Below is the folder structure and code,

Project folder structure:

enter image description here

buttonClick.jade (This is the start page.)

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>

Note:

1) When I include the footer.htmlpage directly in the .jade file, it works fine. But when I do the same using ng-include in the HTML file, it does not work.

2) I also tried the following ng-include methods,

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

ng-include , , html URL- .

jade views, , , html public , .

.jade ( 2), include, .

+3

, 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>
+3

More articles:


All Articles