如何创建一个角度的HTML模块

Question

Learning HTML/Angular.

I have a bunch of HTML code that I want to be re-usable. Basically I write it once and modify the same code base, then just insert the dynamic data using Angular.

My question is - How do I create re-usable HTML code that can be injected into a page using Angular?

For instance, lets say I am an app developer and want to showcase 25 apps on the same page each with their own HTML component (not just a bunch of images). Rather than copying the HTML 25 times I would just like to inject that HTML snippet via some angular command, then insert the text into the corresponding divs etc. I need to stick with Angular/HTML (no other frameworks)

Or is there a better way?

(look at the image for reference - imagine inserting that layout 25 times without duplicating code)

I have tried this using ng-repeat but when I do so it throws the repeating items in the same spot on top of each other. I was hoping that for every div that is repeated it would put it underneath the other 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

Ok the answer was to us ng-repeat as such:

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

And then simply to specify a min-height in the div id in the CSS file so the items wouldn't overlap each other.