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>

Fiddle

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

Answer 2

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

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

如果文件位于同一文件夹中，FireFox应加载文件（有关详细信息，请查看this）。

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

Answer 3

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

安装：

$ sudo npm install http-server -g

然后从您的项目目录：

$ http-server

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

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

Answer 4

您可以使用Grunt和grunt-html plug一起预编译模板以及Angular代码。

Answer 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

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

5 个答案: