Question

我是AngularJS的新手。

我想在主html中包含可重用的html。当我尝试重做this example时，它失败了。目前，我在一个文件夹中有myUsers_List.htm，myUsers_Form.htm，myUsers.js和main.html。

main.html中的代码如下：

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body ng-app="myApp" ng-controller="userCtrl">

<div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
</div>

<script src= "myUsers.js"></script>

</body>
</html>

我在Dreamweaver中打开myUsers_List.htm时可以看到myUsers_Form.htm和main.html中的内容，但是当我在浏览器中打开它时，它是空白的。< / em>的

有人可以帮我解决这个问题吗？是关于文件的路径还是其他一些问题？感谢。

Answer 1

当我尝试在Chrome JavaScript调试器中查看它时，看看是否有任何错误。

由于您的错误是

XMLHttpRequest cannot load file:///C:/Users/Desktop/New%20folder/myUsers_List.htm. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

您似乎需要从Web服务器运行角度应用程序，而不是在本地尝试。

Answer 2

您需要在网络服务器下运行项目，xampp设置简单。

您可以下载angularjs和bootstrap，并在您使用cdn的那一刻从文件系统本地提供它们。

另外，只是观察一下，您在手机上遗漏了标签，因此无法测试是否会导致任何问题。

AngularJS包含可重用的html内容

2 个答案: