angularjsangularjs-ng-includeangularjs-templates

template not loading using ng-include

I learned about ng-include and used it for templates but I am not able to include the page.

The index.html and menu.html are in the same directory and menu.html is to be loaded in index.html

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

I have included the app's name in index.html. I want to include menu.html between header and footer. So I have deleted everything in the menu.html except the container div which I want to include. The links and references have also been properly set in index.html

I am really stuck here. Please help me out! Thanks.

edit: Here is my project structure - 

Project-
       app-
           fonts-...
           images-...
           scripts-
                   app.js
                   controllers.js
                   services.js
           styles-...
           index.html
           menu.html
       ...

edit -2

I just found out that when I change my browser, i.e. from chrome to firefox, it loads successfully! Now why is this happening?

Solution

  • Are you using a webserver ?

    from https://docs.angularjs.org/api/ng/directive/ngInclude

    In addition, the browser's Same Origin Policy and Cross-Origin Resource Sharing (CORS) policy may further restrict whether the template is successfully loaded. For example, ngInclude won't work for cross-domain requests on all browsers and for file:// access on some browsers.