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

Question

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

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

这在web服务器下运行时有效.但是,如果仅通过双击文件浏览器(即不是来自Web服务器)运行Web应用程序,则它不包含该文件

ng-include是否在Web服务器之外工作？我检查了Chrome上的网络状态,它显示了方法上的选项,以及状态上的已取消加载

Answer 1

一种解决方法是内联模板:

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

小提琴.

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

Answer 2

问题是因为file://协议.大多数情况下,所有浏览器在提供文件时都不允许XHR请求file://.这就是AJAX请求失败的原因.并ng-include使用它们下载文件.

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

如果文件位于同一文件夹中,FireFox应加载文件(有关详细信息,请查看此文件).

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

Answer 3

我有类似的问题,我通过运行一个简单的nodejs服务器来解决它,以提供静态文件 - http-server.确保安装了nodejs,然后:

安装:

$ sudo npm install http-server -g

然后从您的项目目录:

$ http-server

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

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