AngularJS Directives : Reusable components

AngularJS Directives

Speak to any developer who has used angular and ask him what is his favourite element of AngularJS, no doubt the answer would be Directives! But what are directives and what makes them so cool?

The Document Object Model (DOM) is a convention created by Web Wide Web Consortium (W3C) for documents written in HTML, XHTML and XML in an object tree, which is powered by the browsers throughout the rendering process. Using the DOM API, makes it possible to traverse the hierarchical structure of the tree to access and manipulate information.

Every time we access a web page, the browser sends a request to the server and then waits for the response. Once the content of the HTML document is recieved the browser starts the analysis and the parse process is order to build the DOM tree. When the tree buidling is done, the angularJS compiler comes in starts to go through it, looking into the elements for special kinds of attributes known as directives.

The following diagram describes the bootstrapping process of the framework that is performed during the compilation process.

What is a Directive ?

A directive is an extension of the HTML vocabulary that allows developers to create new behaviours. The technology enables developers to create reusable components that can be used within the whole application and even provide their own custom components.

A directive can be applied as an attribute, element, class, and even as a comment. AngularJS comes with a number of basic built-in directives. The built-in directives provide the ability iterate over an array, execute a custom behavior when an element is clicked, or even show a given element based on a conditional expression, and many others.

ngApp directive

The ngApp directive defines the root of an AngularJS application. It is used to bootstrap an application and can be used with or without a parameter.

There is a restriction on having only one ngApp directive in the same HTML document that will be loaded and bootstrapped by the framework automatically. However, it’s possible to have others as long as you manually bootstrap them.

ngController directive

The ngController directive attaches a controller to a view enabling the view and the controller to share the same scope enabling them to work together.

You can also attach a controller to a view using $route service if you want to make a Single Page application. However, you will have to remember to avoid using the ngController directive.

Nested controllers

In Angular your controllers can get very complex very quickly and therefore you may want to split your controllers into separate controllers. This is achieved by making use of nested controllers. Nested Controllers enabling the registering controllers that will work only inside a specific element of the view. The scope of the nested controllers will inherit all the properties of the outside scope, overriding it in case of equality.

ngBind Directive

The ngBind directive is generally applied to a span element and replaces the content of the element with the results of the provided expression. It has the same meaning as that of the double curly mark-up, for example, {{expression}} .

It’s good practice to make use of the ng-bind directive over the {{ }} , due to the fact that as a page is being compiled {{ }} expressions may momentarilly visible as the page is being rendered.

ngBindHtml directive

The ngBindHtml directive can be used in the same way as ngBind however, the only difference will be that it does not escape the content, which allows the browser to interpret it.

In order to use this directive, we will need the angular-sanitize.js dependency. It brings the ngBindHtml directive and protects the application against common cross-site scripting (XSS) attacks.

ngRepeat directive

The ngRepeat directive is useful to iterate over arrays and objects. It can be used with any kind of element such as the rows of a table, the elements of a list, and even the options of select. We must provide a special repeat expression that describes the array to iterate over the variable that will hold each item in the iteration.

Gary Woodfine

Freelance Full Stack Developer at
Helps businesses by improving their technical proficiencies and eliminating waste from the software development pipelines.

A unique background as business owner, marketing, software development and business development ensures that he can offer the optimum business consultancy services across a wide spectrum of business challenges.