Angular Directives

I am sure if you are on this page, you must have already got an idea of how good Angular framework is.  This is my first post on Angular topic and I am trying for many in coming few days :), Lets start…

Angular provides many directive which are very helpful whenever it comes to manipulate DOM content tree, event routing, data binding etc. The framework contains a set of built-in directives which offers very helpful functionality to the applications. AngularJS also let us define our own custom directives. AngularJS directives are extended HTML attributes with the prefix “ng-”.

In this post I will talk about creating simple custom directive and how to read value from them or read from external template. Remember this is a very little overview of the functionality Angular directive provides but it will give some insights directives and their usage.

Step 1: Import the required Angular JS file in the HTML File.

<!DOCTYPE html>
<html>
&lt;script&gt;http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js&lt;/script&gt;

Step 2: Define the NG App (Angular App), Along with I am also initializing  one array with some dummy values for our example.

<body ng-app=”myApp” ng-init=”msgs=[‘hello’,’hi’,’its’,’me’]”>

Step 3:   Define our Directives, you can name them anything meaningful, Fo this post I am going with the below name.

<!– new directive using external template, very useful for code reusability.–>
<test-directive> </test-directive>
<!– another directive, in page scope–>
<notify>here</notify>

Step 4: Define the Angular App.

var app = angular.module(“myApp”, []);

Step 5: Define our Custom Directives.

We define directive using .directive function, which takes the directive name and returns its corresponding function.

In this directive, I am using an external html template to renders the dom tree. Look at the “templateUrl” field which takes the path of html resides in same location.

app.directive(“testDirective”, function() {

return {

restrict :  ‘E’,

   templateUrl : ‘msg.tpl..html’

};

});

Contents of “msg.tpl..html

<p ng-repeat=”msg in msgs”>{{msg}}</p>

This is the another example of Directive, Here I am reading the value associated with the directive, weather it’s an tag or attribute value.

app.directive(“notify”, function(){

return function(scope, elem, attr){

alert(elem.html() + ” Tag Value”); //reads the value from Tag
OR if tag is restricted to ‘A’, then use the the below.
alert(attr.notify + ” attribute Value”); //reads the value from Tag attribute

};

});

</body>
</html>

Important to Know:

Restrictions

We can easily restrict  directives to tightly get invoked under some of  the methods.
The legal restrict values are:

  • C for Class
  • E for Element name
  • M for Comment
  • A for Attribute

Default values are ‘E’ and ‘A’, It means we can use the directive as element(Tag) name or as an attribute name.

Well, that’s it.

I hope the post make sense to you, I have just started working on using Angular with main focus on Rest Side Development, But I will make sure to post some interesting stuff coming my way while integrating both.

Happy Learning 🙂

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s