是否可以在没有 Web 服务器的情况下使用 ng-include？答案

【问题标题】：Is it possible to use ng-include without web server?是否可以在没有 Web 服务器的情况下使用 ng-include？
【发布时间】：2013-01-03 10:15:27
【问题描述】：

我正在运行一个仅包含一个文件的 AngularJS 应用程序

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

在网络服务器下运行时有效。但如果 Web 应用程序仅通过从文件资源管理器双击运行（即不是从 Web 服务器），则它不包含该文件

ng-include 是否在 Web 服务器之外工作？我检查了 Chrome 上的网络状态，它在方法上显示 OPTIONS，在状态上显示 Load cancelled

【问题讨论】：

我不认为这与 Web 服务器有关。我认为这更像是跨域问题。

标签： angularjs

【解决方案1】：

一种解决方法是内联您的模板：

<script type="text/ng-template" id="sample.html">
  <div>This is my sample template</div>
</script>

Fiddle.

这会将您的模板放入 Angular 的模板缓存中。当处理 ng-include 指令时，Angular 首先检查缓存。

【讨论】：

脚本是否可以有src属性并指向外部html文件？
@Vishnu，不。见docs——没有src参数。
@MarkRajcok 你的答案是我最近几天一直在寻找的东西:)。非常感谢！
注意：我相信这必须在带有ng-app 的元素内。

【解决方案2】：

问题是因为file:// 协议。当从file:// 提供文件时，大多数浏览器都不允许 XHR 请求。这就是 AJAX 请求失败的原因。并且ng-include 使用它们来下载文件。

您可以使用 --allow-file-access-from-files 参数启动 Chrome 以禁用对 file:// 的检查。

如果文件位于同一文件夹中，FireFox 应该加载文件（查看this 了解更多信息）。

但个人更喜欢启动最简单的 NodeJS 脚本来提供文件，可以在 angular-seed 项目中找到。它只需要node 二进制文件，给人一种普通网络服务器的感觉。

【讨论】：

这确实是真的！我能够在 Firefox 中成功运行该网页，但在 Chrome 中却不行！非常感谢您的解释。

【解决方案3】：

我遇到了类似的问题，我通过运行一个简单的 nodejs 服务器来提供静态文件来解决它 - http-server。确保您已安装 nodejs，然后：

安装：

$ sudo npm install http-server -g

然后从你的项目目录：

$ http-server

现在您可以从以下位置访问您的文件：

localhost:8080/whatever-file-you-have-in-your-directory.html

【讨论】：

【解决方案4】：

你可以使用 Grunt 和 grunt-html plug 来预编译你的模板和你的 Angular 代码。

【讨论】：

【解决方案5】：

在您的 xampp 上使用 虚拟主机 是最好的解决方案，并提供自定义名称，例如 yourProject.dev

更新C:\xampp\apache\conf\extra\httpd-vhosts中的httpd-vhosts文件

<VirtualHost *:80>
        ServerName  yourProject.dev
        ServerAlias www.yourProject.dev  yourProject.com www.yourProject.com
        DocumentRoot "C:\Users\customFolder/yourProject"
        <Directory "C:\Users\customFolder/yourProject">
            DirectoryIndex index.html index.php
            ServerSignature Off
            Options Indexes FollowSymLinks IncludesNoExec
            AllowOverride All
            Allow from all
            Require all granted
      </Directory>
</VirtualHost>

然后将您的主机文件更新为127.0.0.1 yourProject.dev

在 Windows 中：c:\Windows\System32\Drivers\etc\hosts

在 Mac 中：/private/etc/hosts

别忘了让你的 xampp/wampp 休息一下

【讨论】：

xampp 是一个网络服务器。此处提出的问题是不要使用任何网络服务器。