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 will 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 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 that 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 will 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 it 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 it's perfect for setting event listeners or emitters or for interacting with third-party scripts. We pass in four variables into the link function:

• scope: This is a reference to the $scope of the directive
• elem: This is a reference to the rendered DOM element
• attr: This is a reference to the attributes of the element
• ctrl: This is a reference to the previously defined controller

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) {
                }
           }
     })