This page looks best with JavaScript enabled

The power of directives in AngularJS

 ·  ☕ 4 min read  ·  ✍️ Adesh

directives AngularJS power of directives in AngularJS

Overview

AngularJS has lot of in-built directive like ng-app, ng-controller, ng-model, ng-bind and ng-repeat.

Directive extend the normal html with extended behaviour.

In addition to AngularJS directives, you can create your own custom directive. Directive plays a very important role in any AngularJS application. Solid understanding of AngularJS custom directive will make the DOM manipulation easier.

How to create your first basic directive?

Let’s say you want to create a welcome directive to welcome the user. We are creating this basic directive for our understanding purpose. We will move in details step by step.

Output:
Welcome: Adesh, Address: 100 Broadway, New York

Let’s go into the details of our first basic directive. We created our app module variable, attached our controller myCtrl to our app module variable and bind the controller’s scope with application data.

From line 17 of welcomeDirective.html, we start creating our directive named welcomeCustomer. First of all, directive name should be in camelcase means first letter of directive should be small and next letter of second word should be capital. Then, we declared our html template in template property of directive. This welcomeCustomer directive is able to access its parent’s controller $scope property. So, we are printing a welcome message by accessing customer.name and customer.address.

In line 2 of welcomeDirective.html, we used our directive welcome-customer in our view template.

Note: Notice the syntax carefully to declare the directive in view template. we use all lower letter separated by hyphen (-) in our template.

Finally, in the browser window, our directive will render our html view with $scope data. Like this:

Welcome: Adesh, Address: 100 Broadway, New York

templateUrl

It is considered best practice to create a separate html view template and link the path of that html view template in the templateUrl property of your custom directive. Let’s modify above code snippet for templateUrl.

our view template ‘welcome.html

Welcome: {{customer.name}}, Address: {{customer.address}}

If you see line 16 of welcomeDirective2.html, we have replaced our template property to templateUrl property, mentioning the name of our view template ‘welcome.html’. So, in this way, we can write any large html template in a separate template file. Rest of the code will be same.

Directive Restrictions

By default, directives are restricted by attribute and element only. A directive can be invoked by 4 values in the restrict property of directive.

  • E for Element
  • A for Attribute
  • C for Class
  • M for Comments

Default value is ‘EA’ for any directive.

Let’s have a look at these examples to better understand.

Invoke by Element ‘E’

Notice the line 20 of above code, we have added restrict property and set it to E, which means that we can use this directive only as an element.

See the line 3, where we used our directive as an element with opening and closing tags.

Invoke by Attribute ‘A’

Notice the line 20 of above code, we have added restrict property and set it to A, which means that we can use this directive only by attribute.

See the line 3, where we used our directive as an attribute with div.

Invoke by Class ‘C’

Notice the line 20 of above code, we have added restrict property and set it to C, which means that we can use this directive only by class.

See the line 3, where we used our directive as an class with div.

Invoke by Comments ‘C’

Notice line 21 of above code, we have used replace to true to make the comments visible, otherwise it will be invisible.

Summary

So, in this blog, we learned a lot about AngularJS directives. We created our first basic directive. We learned about how to use inline template in template and file template in templateUrl of directive. We learned about directive restrictions and its types by various example codes.

I hope you enjoyed this tutorial a lot.

Cheers!

Read more:

How to create and use filters in AngularJS

Factory and Services in AngularJS

Introduction to Module and Directives in AngularJS

Reference

https://angularjs.org/

Share on

Adesh
WRITTEN BY
Adesh
Technical Architect