Using inline HTML templates

The basic form to create an AngularJS directive is very simple and intuitive. Let's take a look at a basic way to declare a directive using inline HTML:

.directive("directiveName",function () {

  return {
    restrict: 'A',

    controller: function() {
      // Directive Controller
    },

    link: function() {
      // Link function
    },
    template: ''
  }
});

As the name implies, we include the HTML template within the code of the directive through the template property.

Let's see a practical example to show some text on the screen.

Getting ready

The following example is very simple and easy to understand. Imagine that we have set up an AngularJS application called app and want to display some simple text in the browser with the following content: Hello Simple Directive.

For this recipe, we will use a simple HTML file with AngularJS script in the head tag.

Add myFirstDirective as a dependence to the app application:

angular.module('app', ['myFirstDirectives']);

How to do it…

So, we can declare and inject the module that contains our directive into our application. Following the best practices to include new dependencies on the AngularJS application, we called the directive as helloSimpleDirective:

angular.module('myFirstDirective')

.directive('helloSimpleDirective', function() {
 return {
    scope: true,  // inherits child scope from parent.
    restrict: 'E', // An Element Directive.
    replace: true,
    template: '<h3>Hello Simple Directive</h3>'
  };
});

Tip

Note that we have declared here as an element directive.

How it works…

Now, before we look into the code, we need to remember that we have the following four types of directives and that we can use more than one each time:

• An HTML element (<directive-type></directive-type>), represented by the letter E
• An attribute on an element (<input type="text" directive-type/>), represented by the letter A
• As a class (<input type="text" class="directive-type"/>), represented by the letter C
• As a comment (<!--directive:directive-type-->), represented by the letter M

We will see more about this in the later chapters.

In the first line of code, we named the application module as myFirstDirective and added the directive called helloSimpleDirective as a module. It's very simple to use this directive too. Just declare it like any other HTML tag (in this case, an element), as shown in the following code:

<hello-simple-directive></hello-simple-directive>

In the previous code, our angular.module('app', [myFirstDirective]) function serves to register the new directive to the AngularJS application. On the directive, the first string argument is the directive name 'hellosimpledirective' and the second argument is a function that returns a Directive Definition Object (DDO). Also, if the directive has some external object/service dependencies such as $http, $resource, and $compile, among others, they can be injected here.

Note that we have declared the directive as an HTML element, and the sign - has delimited strings to camelCase, so the name helloSimpleDirective will be converted to hello-simple-directive to be used as the directive name.

In this basic example, we just print on the screen the h3 HTML tag with the text Hello Simple Directive.

See also

• You can read more about directives on the official AngularJS documentation at https://docs.angularjs.org/guide/directive