ng-include 不加载指定文件的内容答案

【问题标题】：ng-include not loading contents of specified fileng-include 不加载指定文件的内容
【发布时间】：2019-12-08 11:44:14
【问题描述】：

我目前是初学者 - 正在学习 angularJS。我在使用 ng-include 将一段 html 加载到我的主页时遇到了一些困难

我有 2 个 html 源文件。这两个文件位于同一目录中

index.html
header.html

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>

当我在浏览器中查看 index.html 时，我的 header.html 页面的内容丢失了。我在这里错过了什么？

【问题讨论】：

检查开发者控制台中的网络面板以查看文件的 XHR。

标签： javascript html angularjs angularjs-ng-include

【解决方案1】：

我认为问题的根本原因是从文件系统运行 index.html。如果你查看控制台会看到一个错误：

angular.js:13562 从源“null”访问“file:///header.html”处的 XMLHttpRequest 已被 CORS 策略阻止：跨源请求仅支持协议方案：http、data、chrome、 chrome 扩展，https。

为了解决这个问题，请尝试在某个本地服务器（apache、nginx、node.js 等）上运行您的页面

【讨论】：

谢谢。这不仅是正确答案，而且在按照您上面的说明研究如何使用控制台时，我了解到使用 chrome 作为 Web 开发工具的价值。