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.

Affiliate Disclaimer

Disclosure: Please note that some of the links included in the blog posts are affiliate links, which means I will earn a commission if you decide to make a purchase.

I only include affiliate links to products, services and companies that I have personal experience and have actually used. I only recommend them because they are helpful and useful, not because of the small commissions I make if you decide to buy something.

Please do not spend any money on these products unless you feel they are relevant, suitable and will help you achieve your goals.

Buying anyone of these products and the commisions earned will not make me an overnite multi millionaire, but they will help to cover the hosting costs and compensate for the countless hours and effort I put in to create meaningful and valuable free content I provide to help others succeed.

You've also undoubtedly noticed that I also use various advertising networks - unless of of course you're using an Ad blocker, this is also an attempt to reduce my monthly deficit I experience in providing free relevant, valuable and on occassion insightful content for the benefit of others.

I only really make some money if people click on the ads, unless of course you consider 1c per 1000 impressions real money!

Bear in mind just how many impressions I need to make before I can cover my £20 hosting costs a month!

If you are using an adblocker and guilt stricken you can of course donate using any of the buttons below, but I won't be holding my breath.

Buy me a coffeeBuy me a coffee