Question

我是Angular和JavaScript的新手。我想使用ng-include从htmls导入元素，这些元素很容易显示。为了说明这里，我有3个html文件，＆＃34; 123.html＆＃34;，＆＃34; 456.html＆＃34;和＆＃34; 789.html＆＃34;。

对于＆＃34; 123.html＆＃34;：

nil

对于＆＃34; 456.html＆＃34;：

SELECT 
    "Wishlist".*, 
    COUNT("WishlistItem".*) AS "wishlistItemCount" 
FROM "Wishlist" 
    LEFT OUTER JOIN "WishlistItem" 
    ON ("WishlistItem"."wishlistId" = "Wishlist"."wishlistId") 
WHERE ((("Wishlist"."wishlistId" = $1) OR ("Wishlist"."userId" = $2)) 
    AND 1=1) GROUP BY "Wishlist"."wishlistId" 
ORDER BY "Wishlist"."dateCreated" 
DESC

对于＆＃34; 789.html＆＃34;：

<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body ng-app="myApp">
<p> Here we have 123. </p>
<div class="container">
  <div ng-include="'456.html'"></div>
  <div ng-include="'789.html'"></div>
</div>

</body>
</html>

我看到一些ng-include示例，但所有这些示例都包含ng-controller和其他JavaScript文件。所以我的问题是，如果我只想显示html元素，我还需要ng-controller代码吗？

P.S。上面的代码无法正常工作，有人可以帮助找出这个非常简单的例子的问题吗？浏览器是Firefox。感谢。

Answer 1

Angular必须至少拥有模块myApp，因为那是你在ng-app

中声明的内容

如果没有该模块，它就无法启动，浏览器控制台中的错误应告诉您它无法找到它。

如果你所做的只是使用angular for includes为什么不只是使用服务器端包含？

Answer 2

因此，您没有名为myApp的应用，并且会在引用未定义的模块时出错。在下面的代码中，您可以看到我删除了它。

话虽如此，您可以使用script标记ngTemplate来定义模板。

<script type="text/ng-template" id="456.html">
  <div>
    <P> Here is the 456. </P>
  </div>
</script>

Example using both a script template and a separate file.

这是完整的工作代码：

<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body ng-app>
<p> Here we have 123. </p>
<div class="container">
  <div ng-include="'456.html'"></div>
  <div ng-include="'789.html'"></div>
</div>
<script type="text/ng-template" id="456.html">
  <div>
    <P> Here is the 456. </P>
  </div>
</script>

<script type="text/ng-template" id="789.html">
  <div>
    <P> And here is the 789. </P>
  </div>
</script>
</body>

</html>

使用ng-include简单显示html元素

2 个答案:

这是完整的工作代码：