16

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

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

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

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

4

5 回答 5

32

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

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

小提琴。

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

于 2013-01-20T01:13:10.780 回答
22

问题是由于file://协议。当文件从file://. 这就是 AJAX 请求失败的原因。并ng-include使用它们下载文件。

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

如果文件在同一个文件夹中，FireFox 应该加载文件（查看此以获取更多信息）。

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

于 2013-01-20T10:46:52.430 回答
6

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

安装：

$ sudo npm install http-server -g

然后从您的项目目录中：

$ http-server

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

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

于 2015-02-04T21:26:38.387 回答
1

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

于 2013-10-20T10:36:34.950 回答
-3

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

更新httpd-vhosts文件C:\xampp\apache\conf\extra\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 休息一下

于 2015-07-02T15:48:56.500 回答