Introduction:

Hello everyone!

I am here today to tell you about another AngularJs directive today. AngularJs show directive. This directive is used for making the relations. AngularJS show directive will show a specific passed init part during run time. It totally depends on the constrains which we are going to pass init.

The second important thing is that I shall be using ng-pattern directive with ng-show directive. This directive is used to pass a regular expression. The detail is given below.

I shall be using javascript and will make a “module” for AngularJS show directive. Then I will call the “controller function” to control this module. As I told in my previous lectures that ho to write javascript and how to make module. If you are new so do visit my previous lecture “Controller directive in AngularJS with scope inheritance“. I shall use a predefined $scope object of AngularJS. This is also defined in my previous lectures. Hope you find it interesting topic.

So what do we need for this code? We need to make a new project by making a HTML file for AngularJS show directive. We need script to control it. You can make a separate file for the script or can add script in the head portion of HTML file.

We need the source link for our AngularJS library.

Points to focus:

These are the few points in this topic which you need to do focus upon. See the points below.

a) ng-app

This is now a well known directive for you. Because we are using it in all the lectures. Still for those who are new do visit my previous lecture “AngularJS track and strong directives use“.

b) ng-show

This is today’s main focused directive. It will show a particular part of AngularJS show code during run time. Depends on the constrains which we are going to pass init. It will take a combination of concatenated values.

c) ng-controller

This ng-controller directive is basically made to control the module. It defines a predefined function of javascript.

You can see it’s detail in my previous lecture “Controller directive in AngularJS with scope inheritance

d) ng-model

The need ng-model directive is to bind the value passed init. it binds what ever is passed init. If you don’t know about it’s use do visit my previous lecture “AngularJS Development – Hello Word“. It is defined there in detail.

e) required

This is one of the property of HTML. It is used to make the field compulsory. For example “when we login into any account it demands email and password. If you don’t give any one of them it will give you an error message. This is the required property applied on them”.

f)  JavaScript

The javascript is required to control our HTML containing AngularJS. I shall call the module and then the controller function to control that module. Then I shall pass the $scope operator in the function so that I can be able to write my logic in it. In the logic I shall make two properties with the help of $scope object.

g) $scope

This is a predefined object. This is used to write the logic inside the function. With it’s help we can make new variables and even new functions. Without it we can not write our logic. I also defined it in detail in my previous lecture “Controller directive in AngularJS with scope inheritance“.

h) $error

This is also a predefined object of AngularJS. I shall connect it with the require property of HTML. It means if the field will be applied it should give an error.

i) ng-pattern

This is another directive of AngularJS. It works with regular expression validations. It is a input directive which need or take input. Here I am using it to show age field.

Steps:

These are the steps I shall make to complete my lecture.

  1. The AngularJS library link
  2. The AngularJS show script
  3. The General HTML Code of AngularJS Show Directive
  4. The AngularJS Show Directive Complete Code
  5. Image Description of AngularJS Show Directive Code
  6. Precautions
  7. Conclusion

 

Step 1) The AngularJS library link:

This is the link we need to add in the header of the HTML so that our AngularJS show directive code could work.

Description:

This script must be added in the header so that the could can get the source and work properly. If you don’t add this the code will not work at all.

Step 2) The AngularJS show script:

This below is the script that we shall add in the head portion of HTML, it will control the code.

Description:

What do we have here? This above is the javascript which contains a module of AngularJS show directive, stored in a variable. I named the variable same as the name assigned to the module.

Now I need a controller to control this module. So with the help of the variable “mymodule” is called the controller function by concatenation. The dot operator defines concatenation. I assigned a name to the controller function as “x” , you can give what ever you like to. The second thing, I created a new function in the controller function and passed the object $scope in it. Now I am able to write my logic in the logic portion. You can see, with the help of $scope I created two variables in the logic portion of AngularJS show directive code. I assigned them values.

These below are those four variables.

These variables need to be added into the logic portion of the controller function. First one defines name of the user and the second one defines the email of user. Always place “;” when ever the statements ends. Some of you may confuse with the value I assigned to pattern expression. This is said to be a regular expression you used to see in different places, I just copied it and pasted it.

Step 3) The General HTML Code of AngularJS Show Directive:

Now I shall explain about the required HTML of AngularJS show directive app. Take a fast look below.

 

Description:

The above code shows main HTML code required for AngualrJS show directive code. As you can see in side the body tag, I took a div tag. In the div tag I made a form containing two fields. The first portion contains the name field while the second contains the email filed. The label tags contains the values I wanted to display before the input tags.

The span tag contains the error message I wanted to display when the values are entered wrong. As you can see I assigned the name property to form and input tags. The name property is useful for get and post methods. We will use it to get the values in the regarding tags. See the next step to learn how and where to apply AngularJS.

Step 4) The AngularJS Show Directive Complete Code:

This below code will tells us how to apply AngularJS in the HTML to make it work. Take a closer look below.

Description:

Now what do we have here? This is the full AngularJS show directive code. In this code as you can see I added the source of AngularJS library into the head for connecting it with the code. On the other hand I also added the javascript into the head portion, this is to control the code present into the HTML.

Now look inside the body tag. I made the body tag the owner of AngularJS by applying ng-app directive. I assigned it a name same as per the name of my module. Due to it they both will combine. Inside the body tag I made a form. In the form I placed a div tag which contains another directive ng-controller. I assigned it the same name assigned to the controller function in the script tag.

I made a form inside the div tag which contains two fields. Now look closer, you will see I assigned name property as I told earlier. I concatenated the names I assigned to the tags with the predefined object $error and then to the required property of HTML, then stored them all in ng-show directive. This directive only shows the selective portion of the code which i provided to it.Basically it becomes a connected path in the sequence the properties are placed.

On the other hand in the third portion of the form, ng-pattern directive will act as an input directive. As you can see I assigned name to this directive as per the name of the logic I created with $scope. This will link ng-pattern directive with that logic of the script.

I placed ng-model directive to bind my logic portion variables init. This is the whole code of AngularJS show directive. Let me make it more interesting for you with the help of pictures.

Step 5) Image Description of AngularJS Show Directive Code:

1) The Main Display

The below image shows the display of what the code is. I tells what were we doing so far.

AngularJS show

Description:

The above picture shows us two fields “name” and “email“. The textarea contains the value I placed in the script tag while the email portion contains the dummy email I provided in the script tag.

2) First Portion

The below picture shows the action on the first portion of the form. Just take a quick look below.

AngularJS show

Description:

As you can see in the picture above that I removed the value, which was written inside the textarea. On this act the ng-show directive made the message to appear on the screen. This is the function of the AngularJS show directive. Moving on.

3) Second Portion

In this picture I worked on the second event. Due to this you can see the result below.

AngularJS show

Description:

What is this error? This is because the pattern of email is not performed yet. As you remembered I gave the type email to this input tag. As you will do mistake the ng-show directive will display this message, which informs you to focus on the pattern of email.

4) Third portion:

This picture will show you the working of ng-pattern directive with the help of ng-show directive.

AngularJS show

Description:

As you can see the error appeared in front of the third portion. Why is that so? This is because the age can not be negative. It always take positive value to pass in it. This is how ng-pattern directive works.

5) Both Portion:

This picture will show you the both events together.

AngularJS show

Description:

As you can see the first field is empty and in the second field the email is not complete. While in the third field the age is wrong. Due to this all the errors appeared on the screen by the help of ng-show directive.

This was all the image descriptions which I showed for your ease.

Precautions:

Always place the script tag of source of AngularJS. Must define the ng-app directive. Always place “;” at the end of every statement inside the script. Be careful with the names you provide, they are care sensitive.

Conclusion:

So what do we learned today? We learned how to display error message by the help of AngularJs show directive. We made a simple javascript to control the directives. We learned about the predefined object $error of AngularJS. We also learned about the predefined property of required of HTML.