javascripthtmlangularjsangularjs-ng-include

ng-include not loading contents of specified file

I'm currently a beginner - and learning angularJS. I'm having some difficulty getting a piece of html to load into my main page using ng-include

I have 2 html source files. Both files are located in the same directory

index.html:

<!DOCTYPE html>
<html lang="en" ng-app="myNinjaApp">
    <head>
        <title>NG!</title>
        <link href="content/css/styles.css" rel="stylesheet" type="text/css" />
        <script src="app/lib/angular.js"></script>
        <script src="app/app.js"></script>
    </head>

    <body> 
        <ng-include src="'header.html'"></ng-include>
        <div ng-controller="NinjaController">
            <p>{{message}}</p>
            <input type="text" ng-model="search" />
            <input type="text" ng-model="rateFilter" />
            <ul>
                <li ng-repeat="ninja in ninjas | orderBy: '-name' | filter: search">{{ninja.name}} - {{ninja.rate | currency}}</li>
            </ul>
        </div>
    </body>
<html>

header.html

<div>
    <h1>Ninja Directory</h1>
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">List Ninjas</a></li>
    </ul>
</div>

When I view index.html in my browser, the contents of my header.html page are missing. What am I missing here?

Solution

  • I think the root cause of your problem it`s running your index.html from the file system. And if you look at the console will see an error:

    angular.js:13562 Access to XMLHttpRequest at 'file:///header.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

    For solving this issue try to run your page on some local server (apache, nginx, node.js, etc )