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

【问题标题】：Why does AngularJS ng-view not work locally?为什么 AngularJS ng-view 不能在本地工作？
【发布时间】：2014-07-30 05:50:04
【问题描述】：

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

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

我一直在尝试在本地测试我的机器上的点击功能，但 ng-view 似乎没有加载。当我下载我知道是正确的 Plunker 代码时，因为它在 Plunker 上运行，ng-view 似乎在本地托管后停止工作。

我在 ng-include 和我定义为它们自己的 HTML 标记的指令方面也遇到了类似的问题。

这些不能在我的计算机上本地运行是有原因的吗？（以及我可以为测试目的修复它的方法吗？）

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

【问题讨论】：

【解决方案1】：

如果您将模板放入 index.html 本身而不是使用脚本标签放入单独的文件中，那么 ng-view 将在本地工作，这样 Angular 将不再需要发出 AJAX 请求来获取它们。

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

【讨论】：

【解决方案2】：

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

如果您在 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 服务器中本地运行。

【讨论】：

【解决方案3】：

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

【讨论】：