Introduction:

Welcome everyone! Today I am here to explain some more directives of AngularJS. Which are “AngularJS click-init-blur“. As we know that AngularJS is the library of javascript. We use script to handle this library. So what is the interesting point in this lecture? The “AngularJS click-init-blur” directive are said to be strong directives because they does not need the javascript to handle them. We can make the script to work with them but we do not need it, that is why we say “AngularJS click-init-blur” are strong directives.

How to use them? It is so simple, we only need to call the library of AngularJS. With the help of library “AngularJS click-init-blur” directives will work.

Some steps are same as defined in my previous lectures, like how to make new project, where to make project etc. You can visit my previous lecture AngularJS Development – Hello Word for your help in this matter.

So What we need to do now? We only need the HTML page to perform our coding for “AngularJS click-init-blur” directives.

With in this HTML page we shall add “AngularJS click-init-blur” directives with the source of the AngularJS library.

On going further theory I wanted to show “AngularJS click-init-blur” directives working with the help of coding and pictures.

 

Step 1) The HTML File:

The below code will tell you that what we needed for “AngularJS click-init-blur” directives.

Description:

What do we have here?

This is the simple HTML page. In it’s body there is a button tag and two input tags within a div tag.

This is the simple structure of HTML page. Now we need to do some additions init so that it will work for our AngularJS click-init-blur directives.

 

Step 2) AngularJS Library Source:

In this step we shall simple add the source of our AngualrJS library in the script and place it in to the head of HTML file. The script is shown below.

Description:

This is said to be the script tag. In this tag what I did? I only called the library so that AngularJS click-init-blur tangs can work. This link gives us the source of that library and attaches us with it.

 

Step 3) Adding Script:

After adding the script of AngularJS the head code should be like this.

Description:

As you can see I placed the script code in the head tag. I showed this step because earlier I told that no javascript will be used in the code. So this is not javascript. This is only the script tag calling the library of AngularJS through it’s source.

 

Step 4) ng-click, ng-init, ng-blur directives:

In this step I shall talk about the use of these three directives.

a) ng-click:

This directive is used on the click event or you can say when ever the event is clicked it will show result “with the event“. I will my logic part in it.

b) ng-init:

This directive I used to take a variable and initialized it with a value. I will initialize it with zero(0).

c) ng-blur:

This directive is used to work on the last focused event. I works after the event. I will write my logic in it. It will show behavior on blur event or when the portion where it is applied become blur.

 

Step 5) AngularJS click-init-blur directives Code:

The whole code of AngularJS click-init-blur is shown below.

Description:

What is new now? The new points are that I used four directives of AngularJS click-init-blur and app.

The ng-app directive is used to give control to AngularJS, so this time the whole HTML is acting as the owner of AngularJS.

Look closely, I used AngularJS click-init-blur directives as the properties.

In the button, inside ng-init I took a variable and initialized it with zero(0). While inside ng-click I wrote my logic which tells that if the button is clicked it will do increment on every click. Acts after the button is clicked.

Then I wrote a simple text with the bind expression. Which is binding “x”.

I took two input tags. They will work as checkboxes. If you do not define the type, by default the acts as a checkbox.

In the first checkbox I used the directive ng-init for initializing another value and used ng-blur to give logic to it.

Now You all will be thinking why I used ng-blur directive instead of ng-click? It is because ng-blur work on the last focused event. After the event you can say that.

 

Step 6) The Images:

Now I shall show you the series of pictures of this lecture. They will help you to understand much and will tell you how your output should be.

a) Main Display:

AngularJS click,init,blur

Description:

In the above picture what we see? This is the main display when we shall run the file into out browser. As you can see on the top there is a button. Under that button the text is shown which I wrote.

You can see the counter value is zero(0), this is because no event is performed till yet.

Under that you can see two input type with the text I wrote. This also shows the counter is zero(0) because no event is performed till yet.

 

b) First Event is performed:

 

AngularJS click,init,blur

Description:

In this picture we can see that the button in clicked. Due to this click the increment is performed and now the new value is “1“.

With every click this value will increase on the number of clicks.

 

c) Second Event:

 

AngularJS click,init,blur

fig(1)

AngularJS click,init,blur

fig(2)

Description:

This time we have two pictures. In the fig(1) the first input in clicked and on closer look you can see this is highlighted, but nothing happened. Why is that so? It is because this event works after the tag is blurred. As you can see in fig(2), when the second input is clicked the first input becomes blur and the increment happened. the counter is now equal to “1“. Now when ever the first input in clicked and due to the click on other place it will become blur and the increment will happen.

d) Both Events:

AngualrJS click,init,blur

Description:

In this above image both the events are performed. You can see both are showing increments and their value is “1”. This all image description was for your help, hope you got what I wanted to tell you.

 

Precautions:

Keep in mind that not writing the javascript does not means that you will not add the script containing the source of the AngularJS library.

Don’t mix the ng-click and ng-blur directives. both are used to write logic but they are working differently when their regarding event is performed.

 

Conclusion:

So what we learned from this lecture? We learned how the AngularJS click-init-blur directives works with out using the javascript. The  AngularJS library is said to be a strong library.

We took an HTML file and placed the script containing the library source init and placed it into the head. After that I used four directives of AngularJS and used then to create my file. We learned how to initialize a variable with in the directive and how to write our logic inside the directive.