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

Question

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,

Project Folder Structure:

enter image description here

buttonClick.jade (This is the starting 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 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) I have also tried the following ng-include ways,

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

Variant · Accepted Answer · 2014-10-13 08:23:30Z

3

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.

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.

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.

answered Oct 13, 2014 at 8:23

Variant

17.4k4 gold badges44 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Amarnath Over a year ago

+1 Excellent .. :) Worked like a charm when placed in the public folder.

Amarnath Over a year ago

But one question so how should I give the path to the views folder in the HTML files instead of placing the file in the public folder?

Variant Over a year ago

You can't. it's not publicly accessible. You can wrap an html file in another view and thus make it accessible.

Amarnath Over a year ago

Sorry I did not get this point .. You can wrap an html file in another view and thus make it accessible

Variant Over a year ago

Say you want to keep footer.html in the views folder for whatever reason. you can then create a new view that serves only footer.html. In your master html file use ng-include with the url to the new view.

|

klimat · Accepted Answer · 2015-03-20 11:24:48Z

3

I also had similar problem and I'm also new in Angular and Node :) I'm not sure that my solution is safe, so if itsn't let me know about that.

I've solved it by expose partial directory with express.static middleware.

So add something like that to the app.js:

app.use(require('less-middleware')(path.join(__dirname, 'public'))); //common
app.use('/views', express.static(__dirname + '/views')); //serve views directory as assets

Then you can access your partial from client side:

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

answered Mar 20, 2015 at 11:24

klimat

25.1k7 gold badges66 silver badges72 bronze badges

1 Comment

shafeen Over a year ago

this seems like a bad idea since your view files (jade, ejs, whatever) can be viewed publicly

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related