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.

[ebs_thumbnail target="_self" src="https://garywoodfine.com/wp-content/uploads/2016/05/AngularArch-1.png"]

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.

<html ng-app>
<head>
<title>Angular Sample Application</title>
<script src="angular.js"></script>
</head>
<body>
</body>
</html>

<html ng-app>
<head>
<title>Angular Sample Application</title>
<script src="angular.js"></script>
</head>
<body>
</body>
</html>

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.

sampleApp"><html ng-app="sampleApp">
<head>
<title>Angular Sample Application</title>
<script src="angular.js"></script>
<script>
var sampleApp = angular.module("sampleApp", []);
sampleApp.controller("sampleAppCtrl", function ($scope) {
});
</script>
</head>
<body ng-controller="sampleAppCtrl">
</body>
</html>

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.

<body ng-controller="sampleAppCtrl">
<div ng-controller="sampleAppNestedCtrl">
</div>
</body>

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}} .

<!doctype html>
<html ng-app="sampleApp">
<head>
<title>Sample Angular Application</title>
<script src="angular.js"></script>
<script>
var sampleApp = angular.module("sampleApp", []);
sampleApp.controller("sampleAppCtrl", function ($scope) {
$scope.appTitle = "Sample Angular Application";
});
</script>
</head>
<body ng-controller="sampleAppCtrl">
<h3 ng-bind="appTitle"></h3>
</body>
</html>

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.

<!doctype html>
<html ng-app="sampleApp">
<head>
<title>Sample Angular Application</title>
<script src="angular.js"></script>
<script src="angular-sanitize.js"></script>
<script>
var sampleApp = angular.module("sampleApp", []);
sampleApp.controller("sampleAppCtrl", function ($scope) {
$scope.appTitle = "<b>Bold Sample Angular Title</b>";
});
</script>
</head>
<body ng-controller="sampleAppCtrl">
<h3 ng-bind-html="appTitle"></h3>
</body>
</html>

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.

<!doctype html>
<html ng-app="sampleApp">
<head>
<title>Sample Angular Application</title>
<script src="angular.js"></script>
<script>
var sampleApp = angular.module("sampleApp", []);
sampleApp.controller("sampleAppCtrl", function ($scope) {
$scope.appTitle = "Sample Angular Application";
$scope.sampleArray = [];
});
</script>
</head>
<body ng-controller="sampleAppCtrl">
<h3 ng-bind="appTitle"></h3>
<table>
<thead>
<tr>
<th>Sample Column 1</th>
<th>Sample Column 2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="sample in sampleArray">
<td><span ng-bind="sample.columnOne"></span></td>
<td><span ng-bind="sample.columnTwo"></span></td>
</tr>
</tbody>
</table>
</body>
</html>

About
Latest Posts

Gary Woodfine

Technical Director at threenine.co.uk

Gary is Technical Director at threenine.co.uk, an independent software vendor specialising in IoT, Field Service and associated managed services,enabling customers to be efficient, productive, secure and scale-able.