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:

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>

Answer 1

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.

Answer 2

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>