AngularJS provides an abstraction on top of XHR, the $http service, with a more usable interface than Vanilla JavaScript, using a Promise-based interface as opposed to Callbacks. A service is a singleton object that provides some core functionality across your application, increasing reusability. We can use $http to dynamically load data to use in our testimonials component.

It is good practice to use $http within an AngularJS service. In other words, any interaction between the application and a server should be wrapped within a service. Let's create a testimonialsService. Create a file, src/app/services/testimonials.service.js , with the following content:

    angular.module('MyPhoto')
    .service('testimonialsService', function($http) {
    })

Here, we are attaching a new service, testimonialsService , to the MyPhoto module, and declaring that it has a dependency on the core AngularJS $http service. The testimonialsService will now be instantiated only when a component within MyPhoto depends on it, and that dependency can be declared in the same way as the $http service is declared here. Let's add some functionality. We want this service to provide a way to load data for the testimonials component in a JSON format. Ideally, this would come from a database backed API, but here we will just load it from the filesystem. Let's create a JSON file, src/data/testimonials.json, with the data for testimonials:

    [
      {
          "name":"Debbie",

          "message":"Great service! Would recommend to friends!"
      },
      {
          "name":"Anne",

          "message":"Really high quality prints!"
      },
      {
          "name":"Oscar",
          "message":"Declared their greatness, exhibited greatness."
      },
      {
          "name":"Joey",

          "message":"5 stars! Thanks for the great photos!"
      },
      {
          "name":"Mary",

          "message":"Made a stressful event much easier! 
          Absolute professionals!"
      },
      {
          "name":"Alice","message":"Wonderful! Exactly as I imagined they would turn out!"
      },
      {
          "name":"Jack & Jill","message":"So happy with how the photos turned 
          out! Thanks for capturing the memories of our day!"
      },
      {
          "name":"Nick",
          "message":"Perfectly captured the mood of our gig. Top notch."
      },
      {
          "name":"Tony",

          "message":"Captured our Cup final win! Great stuff!"
      }
    ]

With the data in place, let's update testimonialsService with a function to retrieve testimonials.json :

    angular.module('MyPhoto')
    .service('testimonialsService', function($http) {
        function getTestimonials() {
            $http.get('./data/testimonials.json')
            .then(
                function(success) {
                    return success.data
                },
                function(error) {
                    return error
                }
            )
        }
        return {
            getTestimonials: getTestimonials
        }
    })

AngularJS includes a service based on Promises to allow for asynchronous functions, called $q . As the getTestimonials function includes an asynchronous request, we need to make the function itself asynchronous. To do this, first we add a dependency on $q to testimonialsService . We then create a deferred object, which will resolve when the HTTP request succeeds, or reject when the request fails. Finally, we return a Promise, which will eventually resolve:

    angular.module('MyPhoto')
    
//Declare the service and any dependencies, attaching
    it to the MyPhoto module..
    .service('testimonialsService', function($http, $q) {
        function getTestimonials() {
            //Create the deferred object
            var deferred = $q.defer()
            //Use $http.get to create a promise to load testimonials.json 
            $http.get('/data/testimonials.json')
            
//Call the then method of the promise 
            .then(
                //Define what happens if the promise returns 
                successfully 
                
function(success) {
                    //Resolve the deferred and return the data
                    property of the success object
                    deferred.resolve(success.data)
                },
                //Define what happens if the promise returns an error
                
function(error) {
                    //Reject the deferred, returning the error value
                    deferred.reject(error)
                }
            )
            //Return the deferred promise 
            
return deferred.promise
        }
        return {
            getTestimonials: getTestimonials
        }
    })

Now, our function returns a Promise, which will resolve to either the data part of our success object, or reject and return the error object. The usage of getTesimonials would now be something like:

    testimonialsService.getTestimonials()
    .then(
        function(response) {
            console.log(response)
        },
        function(error) {
            console.error(error)
        }
    )

What is happening here is self-explanatory. We call the getTestimonials function of testimonialsService . The getTestimonials function has a then property. We pass two functions to then : the first function takes the successful response as a parameter and defines what to do when the Promise resolves; the second function takes the rejected response and defines what to do when the Promise is rejected. Now that we have a service that will return the list of testimonials, let's create an AngularJS directive to render the component.

AngularJS provides an API for extending HTML with custom elements, attributes, comments, and classes. The AngularJS compiler will recognize a custom directive in the DOM and execute a certain specified behavior on the attached element. We are going to build the testimonial's directive using the directive interface. Let's create a new file, src/app/directives/testimonials.directive.js , with the following content:

    angular.module('myPhoto')
    .directive('testimonials', function(testimonialsService) {
        return {
            restrict: 'EA',
            replace: true,
            templateUrl: './app/templates/testimonials.html',
            controller: function($scope) {
            },
            link: function(scope, elem, attr, ctrl) {
            }
        }
    })

Here, we are adding a new directive— testimonials —to the MyPhoto module, which has a dependency on testimonialsService . Directives return an object with a set of properties that are interpreted by AngularJS. We will touch on a few of them here.

First, we have restrict: 'EA' . This means that the directive can be used as either an element or an attribute. For instance, we can use as the directive in either of the following ways:

    <testimonials></testimonials>
    <div testimonials></div>

There are two other ways of using a directive—as a class, by adding C to the restrict property, and as a comment, by adding M to the restrict property.

Next, we have the replace property. By setting this to true , the DOM elements generated by the directive will directly replace the DOM element calling it. If replace is set to false , then the generated elements will be nested within the calling element.

After replace , we have the templateUrl property. The templateUrl is a path to a partial HTML template which will be generated and executed upon by the directive. There is a template property also available, to allow for inline HTML in the directive. We are going to store the testimonials template in src/app/templates/testimonials.html . As src will effectively be the root of our deployed application, we will use an absolute path to the application directory.

The controller property is next, where we pass in the $scope object. The scope in AngularJS represents the data model of the current application, or the current context of the application. The $scope model here is exclusive to this instance of the testimonials directive, and cannot be manipulated by any other part of the application. The controller code is the first to be executed when a directive is instantiated, so makes for the perfect place to gather necessary data or set scope variables for the directive to use.

Finally, we have the link function. The link function is the last code to be executed during the directive life cycle. The link function is executed immediately after the directive template has been added to the DOM, so is perfect for setting event listeners or emitters, or for interacting with third-party scripts. We pass in four variables into the link function:

The variable names are unimportant here, they can be anything, but these names are pretty standard.

This is just a skeleton of a directive. AngularJS directives have many more features and intricacies than described here, and this example is just one way of writing a directive; there are many other styles. For the purposes of this example, the form of this directive is perfect.

We want the testimonials directive to render the testimonials component. To do that, it will need a list of said testimonials. In the controller function, we can use testimonialsService to retrieve the list:

    .directive('testimonials', function(testimonialsService) {
        return {
            restrict: 'EA',
            replace: true,
            templateUrl: './app/templates/testimonials.html',
            controller: function($scope) {
                testimonialsService.getTestimonials()
                .then(function(response) {
                    $scope.testimonials = response
                    }, function(error) {
                        console.error(error)
                    })
                },
                link: function(scope, elem, attr, ctrl) {
                }
           }
     })

In the controller function, we call testimonialsService.getTestimonials . When getTestimonials resolves, we create a scope variable, testimonials , with the value of the response. If the Promise does not resolve, we output an error to the console. With this, our directive has a list of testimonials before it renders, as the controller is the first step of the directive life cycle. Now, let's write the testimonials template.

Create src/app/templates/testimonials.html with the following content:

    <div class="myphoto-testimonial-grid animated fadeIn" data-columns>
        <div ng-repeat="testimonial in testimonials track by $index" 
        class="myphoto-testimonial-column hvr-grow-shadow hvr-sweep-to
        -top">
            <h6>{{testimonial.name}}</h6>
            <p>{{testimonial.message}}</p>
        </div>
    </div>

That's it. Compare this to the hard coded version and notice the difference in the amount of HTML we wrote. So, what is going on here? Well, we took the raw HTML for the testimonial component and removed the individual testimonial elements. We then added a new attribute, ng - repeat , to the myphoto-testimonials-column div element. The ng-repeat attribute is actually an AngularJS directive itself. The ng-repeat attribute loops through the data passed to it, repeatedly adding the element which is an attribute of the DOM. We give ng-repeat the value of "testimonial in testimonials track by $index" . Simply, we are saying repeat this element for every entry in the testimonials property of the directive's scope, giving each value the reference testimonial. We are also telling ng - repeat to track each entry by $ index , which is the position of the entry in testimonials . Using track by has great performance benefits for ng-repeat . Without track by , AngularJS will only identify the entries by its own built-in unique identifier, $id . If the data used for the entries is reloaded, AngularJS will recreate each DOM element in the list again. Using track by $index allows AngularJS to just reuse the entries, as it now knows which DOM elements need to be recreated and which can be reused. One caveat with using $index for tracking is that AngularJS will expect the reloaded data to be in the same order. You can use any property of the entry with track by . For example, if each object in testimonials.json had an id property, we could use track by testimonial.id . Within the myphoto-testimonial-column div , we create a h6 and p element, just like the raw HTML testimonial markup. Instead of hard coding values, we use the reference to the entries in the testimonials array, testimonial , provided by ng-repeat . Using testimonial along with handlebar notation, we can access the properties of each entry as ng-repeat loops through testimonials. As we loop through, AngularJS will execute on the handlebar notation, replacing them with the correct values.

Let's test the testimonials directive out. First, add testimonials.service.js and testimonials.directive.js to the head 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>

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:

Figure 9.1: The improved testimonials section, displaying testimonials dynamically

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 , Integrating Bootstrap with 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.

We need to register the testimonials component with Salvatorre after it has rendered. We can do this through the link function. First, let's add $timeout service as a dependency:

    .directive('testimonials', function(testimonialsService, $timeout)

The $timeout service is the AngularJS wrapper for the window.setTimeout function. As you may know, AngularJS works on a digest cycle, where it uses dirty-checking techniques to see which parts of the application needs to be updated. This happens routinely, or can be forced. We can use $timeout to ensure that certain code is executed in a later digest cycle. Let's update the link function with the following:

    link: function(scope, elem, attr, ctrl) {
        $timeout(function() {
            salvattore.registerGrid(elem[0])
        }, 1000)
    }

Here, we are using $timeout with two parameters. The latter parameter is a delay of 10 milliseconds, to ensure the code is executed in a later digest cycle; 1,000 milliseconds should be enough to ensure the testimonial component has completed rendering. We pass in a function as the first parameter, responsible for calling Salvatorre's registerGrid function. The registerGrid function forcibly instruments the passed element with Salvattore. We pass the first element in the elem array, which is the rendered testimonial component. With this in place, the Testimonial tab will have a dynamic grid layout.

As such, we have managed to replicate the Testimonial tab—which leverages Bootstrap, Salvattore, Hover, and Animate.css—through AngularJS services and directives, using dynamic content instead of hardcoded values. Time to move onto React.