In Chapter 7, Utilities, we built a testimonials component to demonstrate the powers of Salvattore, Hover, and Animate.css. When building this component, we hard-coded all the content and introduced a lot of repetition:

    <div role="tabpanel" class="tab-pane" id="services-testimonials">
   <div class="container">
      <div class="row">
         <div class="myphoto-testimonials-grid animated 
            fadeIn" data-columns>
            <div class="myphoto-testimonial-column hvr-
               grow-shadow hvr-sweep-to-top">
               <h6>Debbie</h6>
               <p>Great service! Would recommend to friends!
               </p>
            </div>
            <div class="myphoto-testimonial-column hvr-
               grow-shadow hvr-sweep-to-top">
               <h6>Anne</h6>
               <p>Really high quality prints!</p>
            </div>
            <div class="myphoto-testimonial-column hvr-
               grow-shadow hvr-sweep-to-top">
               <h6>Oscar</h6>
               <p>Declared their greatness, exhibited 
                  greatness.
               </p>
            </div>
            <div class="myphoto-testimonial-column hvr-
               grow-shadow hvr-sweep-to-top">
               <h6>Joey</h6>
               <p>5 stars! Thanks for the great photos!</p>
            </div>
            <div class="myphoto-testimonial-column hvr-
               grow-shadow hvr-sweep-to-top">
               <h6>Mary</h6>
               <p>Made a stressful event much easier! 
                  Absolute professionals!
               </p>
            </div>
            <div class="myphoto-testimonial-column hvr-
               grow-shadow hvr-sweep-to-top">
               <h6>Alice</h6>
               <p>Wonderful! Exactly as I imagined they 
                  would turn out!
               </p>
            </div>
            <div class="myphoto-testimonial-column hvr-
               grow-shadow hvr-sweep-to-top">
               <h6>Jack & Jill</h6>
               <p>So happy with how the photos turned out! 
                  Thanks for capturing the memories of our day!
               </p>
            </div>
            <div class="myphoto-testimonial-column hvr-
               grow-shadow hvr-sweep-to-top">
               <h6>Nick</h6>
               <p>Perfectly captured the mood of our gig. 
                  Top notch.
               </p>
            </div>
            <div class="myphoto-testimonial-column hvr-
               grow-shadow hvr-sweep-to-top">
               <h6>Tony</h6>
               <p>Captured our Cup final win! Great stuff!
               </p>
            </div>
         </div>
      </div>
   </div>
</div>

We can drastically improve the maintainability of this component by making the content dynamic and then leveraging AngularJS to recursively add individual testimonials to the DOM.

Let's learn how to load dynamic content using AngularJS.