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