如何创建角度为HTML的模块

Question

学习HTML / Angular。

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

我的问题是 - 如何创建可以使用Angular注入页面的可重用HTML代码？

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

或者有更好的方法吗？

（查看图片以供参考 - 想象插入该布局25次而不重复代码）

我已经尝试过使用ng-repeat但是当我这样做时，它会将重复的项目放在彼此顶部的相同位置。我希望，对于每一个重复的div，它都会把它放在另一个div之下。

<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>

Answer 1

好的答案是我们这样重复：

<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>

然后只需在CSS文件中的div id中指定min-height，这样项目就不会相互重叠。