为什么AngularJS ng-view不能在本地工作？

Question

我已经工作了几个小时，通过我的AngularJS应用程序获取链接以点击进入不同的视图。

但是，我似乎只能在Plunker上获得在线工作的功能。

我一直在尝试在本地测试我的计算机上的点击功能，但似乎没有加载ng-view。当我下载我知道的Plunker代码是正确的，因为它正在使用Plunker时，ng-view似乎在本地托管后就退出了工作。

我也有与ng-include和指令类似的问题，我已将其定义为自己的HTML标记。

这些不能在我的电脑上本地工作吗？ （我可以通过一种方法将其用于测试目的吗？）

如果您愿意，可以查看我在Plunker here上谈论的一些代码。

Answer 1

ng-view和ng-include都使用AJAX加载模板。问题是默认情况下浏览器不允许AJAX请求位于本地文件系统上的文件（出于安全原因）。因此，您有两种选择：

1. 运行将为您的文件提供服务的本地Web服务器
2. 告诉您的浏览器允许本地文件访问

如果您使用的是Mac，那么第一个选项就相当简单，因为您有几个内置的Web服务器（Apache httpd和Python模块SimpleHTTPServer）。要运行Python SimpleHTTPServer模块，只需在文件所在的文件夹中打开控制台并运行

python -m SimpleHTTPServer 3000

然后打开浏览器并输入http://localhost:3000。那就是它。

如果你在Windows上，它也是可能的。您可以安装例如Wamp并从中提供文件。

Chrome可以使用第二个选项，只需在命令行中使用--allow-file-access-from-files选项运行该选项，或者在Chrome可执行文件的路径后将此标记添加到快捷方式。

This资源也可用于了解如何在不同浏览器中本地运行和使用不同的Web服务器。

Answer 2

ng-view和ng-include生成ajax请求以提供模板文件。因为您在本地运行它，它无法提出该请求。解决此问题的一个简单方法是使用http-server通过本地服务器提供内容。

Answer 3

如果你将模板放在index.html本身而不是使用脚本标签放入单独的文件，那么

ng-view将在本地工作，这样angular就不再需要发出AJAX请求来获取它们了。

<script type="text/ng-template" id="home.html">
  This is the Home template
</script>