How to include an html file in another html file using Angularjs

Question

I have a index.html file and another topBar.html file and I want to include that file in my index.html.

My directory structure is like below:

mainfolder/
    scripts/
    views/
        topBar.html
    index.html

Here is the code that I tried

 <div ng-controller="mainCtrl">
   <div ng-include="'views/topBar.html'"></div>
 </div>

But nothing is being displayed and it gives me error in the console

angular.js:12701 Failed to load file:'path' Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

The error message says it all. Don't try to run your angular web application from the file system. Run it by serving the files from a web server, over http. — JB Nizet
– JB Nizet, Commented Oct 27, 2017 at 6:38
Possible duplicate of "Cross origin requests are only supported for HTTP." error when loading a local file — Satpal
– Satpal, Commented Oct 27, 2017 at 6:40

vertika · Accepted Answer · 2017-10-27 07:05:14Z

3

If you have written your code in yur code editior and testing your page in your browser without using any server then this error comes. You can test plain html css in browser that will work fine , but when you craete something more than just html , css then that gives error . A server has to be used for that .many web browsers are programed to watch for cross site attacks, and will block requests. You don't want anyone being able to read your hard drive from your web browser.

Solution :

Install a local server and then run your application on server.

answered Oct 27, 2017 at 7:05

vertika

1,4341 gold badge9 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

How to include an html file in another html file using Angularjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related