Introduction:

Hello Everyone!

Today I am here to tell you about some more directives of AngularJS. As you know that AngularJS is strong library and some of it’s directives can be used without using the javascript. The interesting point in today’s lecture is that AngularJS can do tracking for you. The AngularJS track and strong directives are used to do tracking without using javascript.

AngularJS track and strong directives are used to track you page during run time. If a user cut, copy or paste any area from you page it will inform you.

So what we do now? You know we need few thing to do our coding.

a) We need an IDE to do coding inside.

b) We need to make new project or can make new file in the previous project. Some of you may not know how to make new project so please do visit my previous lecture AngularJS Development – Hello Word.

c) The file we need should be of HTML. Why we need a HTML type of file? As we know that AngularJS works inside the HTML. So we need it for AngularJS track and strong directives coding.

Steps:

Step 1) AngularJS Track and Strong Directives Detail:

a) ng-cut:

This is a strong directive and is used to check, have the user performed the cut event in the text or not? It works during run time. When ever you cut something it will inform you.

b) ng-copy:

The ng-copy directive is used to check weather the user copied any portion in the text provided. If any one just selects some of the portion and just copy it, it will inform you suddenly.

c) ng-paste:

The paste directive is used to check weather the user have pasted some thing or not? When ever the you will paste anything it will inform you during run time.

d) ng-app:

As you all know I told in every previous lecture that we must add ng-app directive in one of the tag. I mostly add it in the HTML tag. To make the owner of AngularJS. You can take it in this way that you can do nothing at someone’s place because you re not the owner of that. But at your place you can do anything. So AngularJS wanted to become the owner to do work in HTML.

Description:

These are the tags we shall be using in our topic today. They works during run time. They will help you to do trarking of your page.

 

Step 2) The Source:

As you know we need to add the library source in the head of the html file. It must be added otherwise the code will not work. The script is shown below.

Description:

Don’t confuse yourself with this script, this is not the javascript I told about. We shall not be adding the javascript. This is only the source script.

Step 3) The HTML for AngularJS Track and Strong Directives:

What do we have here? This is the structure of my HTML file. How it should be. Let’s have closer look below.

Description:

The above code is just a simple HTML file which we needed for AngularJS track and strong directives. I took a simple HTML file and inside the body I added a paragraph tag. After the paragraph tag I placed an input tag and three statements separated by <br /> tags. The <br/> tag is mostly used to break the line and move the remaining text on the next line. Now I shall add AngularJS directives in it.

How this code will look like if we run it in to the browser. It is shown below.

Image:

AngularJS track and strong directives

You can do nothing on it now because AngularJS is still not applied on it.

Step 4) Detail code of AngularJS Track and Strong Directives:

Now I shall show you the detail code of my AngularJS track and strong directives. It will help you in coding, just copy it and paste it into your IDE. Look below.

Description:

As you can see in the above code I made the HTML tag as the owner of AngularJS app by applying ng-app directive in it as a property.

Further down I added the source of AngularJS library in to the head tag. This source will connect us directly to the library.

In the body tag I added ng-copy directive in paragraph tag. This tag will work on what ever the text will be in this tag.

The input tag is a text type tag and it contains two tags the ng-cut and ng-paste. If you will paste anything inside this text portion it will tell you and if you cut some or whole portion of the text in the text-bar it will tell you about it.

Do a closer view, I assigned names to these directives and declared them with a character. Why I did this? I did it to bind them so that they will work and show the message. The three statements I wrote in the end shows the message as you can see and I placed the related expression in front of them which is to be bound. You can give names what ever you like to, but I gave meaning full names to understand easily.

Images:

The pictures are provided for your ease. Just let you know what are you doing actually. Look below.

AngularJS track and strong directives

Description:

 

a) ng-copy

The below picture will define the copy event. When we will perform the copy event. See both images.

AngularJS track and strong directives

fig(a)

AngularJS track and strong directives

fig(b)

Description:

In the fig(a) you can see the portion  is selected and copy event is being performed.

Now see fig(b) the event is performed and the statement below shows “You have copied=true“. This is that value I declared it with the name “copied“of ng-copy directive and why is it printed in front of the first statement? It is because I “bound” the “value” in front of it.

b)ng-paste

The below pictures will show you how to check the paste directive.

AngularJS track and strong directives

fig(a)

AngularJS track and strong directives

fig(b)

Description:

In the fig(a) you can see that I am pasting the text inside the text-box. You can see this by the highlighted portion.

Now see fig(b) the event is performed and the statement below shows “You have pasted=true“. This is that value I declared it with the name “paste“of ng-paste directive and why is it printed in front of the last statement? It is because I “bound” the “value” in front of it.

c)ng-cut

The below pictures will show you how to check the cut directive.

AngularJS track and strong directives

fig(a)

AngularJS track and strong directives

fig(b)

Description:

In the fig(a) you can see by the highlighted portion that cut event is being performed. I selected some portion of the text from the text area and want to cut it.

Now see fig(b) the event is performed and the statement below shows “You have cut=true“. This is that value I declared it with the name “cut“of ng-cut directive and why is it printed in front of the second statement? It is because I “bound” the “value” in front of it.

AngularJS track and strong directives

In the above picture you can see all the events are performed together. So this is how the AngularJS track and strong directive works.

Precautions:

Always keep in mind that use the same values for binding other wise the code will not work. Define ng-app for the owner. These are the strong directives they does not need javascript to control them.

Conclusion:

So what we concluded today? We learned how to do tracking of our page with the help of AngularJS track and strong directives. We did not need javascript to handle our code. This is the detailed description on this topic because everything is described in detail.