current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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>

Overlap

enter image description here

share|improve this question
    
Have you looked at ng-repeat? –  jme11 Jun 21 '14 at 0:46
    
I used ng-repeat in the angular google tutorial to insert images. But this seems more complex. It has divs with associated css. I can understand how to repeat the text content and the images, but how do you ng-repeat the entire layout? –  Spentak Jun 21 '14 at 0:49
    
So, each layout is completely different then? I mean, they don't have common elements like each one has a headline, subhead, description, link and a carousel of screenshots? –  jme11 Jun 21 '14 at 0:56
    
Each will have a headline, description, and image. I think i see what you are saying - you are saying the ng-repeat will repeat the entire block of html code and then insert the appropriate images/text? –  Spentak Jun 21 '14 at 1:20
1  
Yes, that's what I was thinking. Attach the repeat to the container div, then iterate over the array of your objects within the template. So each object would have something like: [{headline: "Headline here", description: "some description", images: [img1.jpg,img2.jpg]}, ...] –  jme11 Jun 21 '14 at 1:30

1 Answer 1

up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.