Let's test out the testimonial directive. First, add testimonials.service.js and testimonials.directive.js to the footer of index-angular.html:
<script src="app/services/testimonials.service.js"></script> <script src="app/directives/testimonials.directive.js"></script>
Next, replace the markup for the testimonials component with the directive markup. We will use the attribute form of the testimonials directive as an attribute of a div element:
<div role="tabpanel" class="tab-pane" id="services-testimonials"> <div class="container"> <div testimonials></div> </div> </div>
To resolve this problem, install http-server using npm install http-server -g. Then, run the server with the http-server /path/to/your/dir command. Once the server is running, open your browser and navigate to http://127.0.0.1:8080/index-angular.html.
With that in place, AngularJS will replace this element with the template defined in testimonials.directive, and with the testimonials from testimonials.json, served by testimonialsService.getTestimonials. Let's check it out:
Awesome! We now have a dynamic Testimonials tab, thanks to AngularJS. Something is not right here, though. Salvatorre, the dynamic grid library we introduced in Chapter 7, Advanced Third-Party Plugins, does not seem to be taking effect on this component anymore.
The reason for this is simple—by the time AngularJS has rendered the testimonials component, Salvatorre has already instrumented the DOM.