Javascript 如何创建HTML模块

学习HTML/Angular

我有一堆HTML代码，我希望可以重用。基本上我只编写一次，修改相同的代码库，然后使用Angular插入动态数据

我的问题是-如何创建可重用的HTML代码，并使用Angular将其注入页面

例如，假设我是一名应用程序开发人员，希望在同一页面上展示25个应用程序，每个应用程序都有自己的HTML组件（而不仅仅是一堆图像）。与其复制HTML 25次，我只想通过一些angular命令插入HTML片段，然后将文本插入相应的div等。我需要使用angular/HTML（没有其他框架）

还是有更好的办法

（查看图像以供参考-想象一下在不复制代码的情况下插入该布局25次）

我已经尝试过使用ng repeat，但当我这样做时，它会将重复项扔到彼此上方的同一位置。我希望每一个重复的分区都能放在另一个分区的下面

<div id="apps" ng-controller="MyApps">
    <div id="appsection" ng-repeat="app in applist">
      <img class="rightappimg" src={{app.img}} />
      <strong class="appbannertext">{{app.firstLine}}</strong>
      <strong class="appbannertextsubtitle">{{app.secondLine}}</strong>
      <strong class="appbannertextsubtitlesmall"><span class="ios">iOS, iPhone, iPad</span> & <span class="android"> Android</span></strong>
      <strong class="appbannerdescriptiontitle">{{app.fourthLine}}</strong>
      <p class="appbannerdescription">{{app.fifthLine}}</p>
    </div>
  </div>

{{app.firstLine}}
{{app.secondLine}}
iOS、iPhone、iPad和安卓系统
{{app.fourthLine}}
{{app.fifthLine}

---

好的，答案是我们重复如下内容：

<div id="apps" ng-controller="MyApps">
<div id="appsection" ng-repeat="app in applist">
  <img class="rightappimg" src={{app.img}} />
  <strong class="appbannertext">{{app.firstLine}}</strong>
  <strong class="appbannertextsubtitle">{{app.secondLine}}</strong>
  <strong class="appbannertextsubtitlesmall"><span class="ios">iOS, iPhone, iPad</span> & <span class="android"> Android</span></strong>
  <strong class="appbannerdescriptiontitle">{{app.fourthLine}}</strong>
  <p class="appbannerdescription">{{app.fifthLine}}</p>
</div>

{{app.firstLine}}
{{app.secondLine}}
iOS、iPhone、iPad和安卓系统
{{app.fourthLine}}
{{app.fifthLine}

---

然后简单地在CSS文件中的div id中指定一个最小高度，这样项目就不会相互重叠。

你看过ng repeat吗？我在google angular教程中使用了ng repeat来插入图像。但这似乎更复杂。它具有与css关联的div。我可以理解如何重复文本内容和图像，但是你如何重复整个版面？那么，每个版面都是完全不同的？我的意思是，它们没有共同的元素，比如每一个都有标题、副标题、描述、链接和一个旋转的屏幕截图？？每一个都有标题、描述和图像。我想我明白你的意思了-你是说ng repeat将重复整个html代码块，然后插入适当的图像/文本？是的，我就是这么想的。将repeat附加到container div，然后迭代模板中的对象数组。所以每个对象都有如下内容：[{headline:“headline here”，description:“some description”，images:[img1.jpg，img2.jpg]}，]