Introduction:

So today we will learn what is the purpose of controller directive in AngularJS and the purpose of $scope in controller directive angularjs function. So we will make a new project for this. You can even write this in previous project just by making a new file of javascript. Because we need a little script to handle our project, but it is better to make new project. Then we will write our script by busing controller directive angularjs function and predefined $scope object, also assign your file a meaning full name . The controller directive angularjs is a constructor function that takes a $scope parameter. The controller directive angularjs will inject model data in to view, which is HTML with the help of object “$scope”. The $scope will be used for passing the model. We will use a predefined function of AngularJS named as “module”. I will not go on further theory, lets see this with the help of coding and images.

Many of you may not know how to make new project and which IDE is to be used for this type of project. For those who don’t know just read my previous lecture AngularJS Development – Hello Word, it will help you to sort this problem.

Step 1) The JavaScript With Controller Directive AngularJS File :

Description:

Now what is this? It is a java type of file. It is a simple script. Those who are new they will also understand from this lecture.

In this code you can see AngularJs predefined function “module“. In the function I passed two arguments. The first one is the name  and the second one is the empty array list. Then I passed the full module into a local javascript variable and named it as “SecondApp“, you can give what ever you like. I assigned it with the same name I passed in the function, you can write what ever you like to.

With the help of this variable I called another function which is controller. In this function you will write a meaning full logic. The  first parameter  I will give it a meaning full name as “MyController” and in the second parameter I will pass a javascript function. Inside this function I will write my logic. Basically this is the main logical portion where I will write my actual thing. Some of you may confuse with the single quotes and double quotes in the first parameters on the functions, you may write any of them. But the names are case sensitive, you have to take care of that. Now the most important point, inside the controller function I passed the function and in that function I passed the $scope object. This object will help us to write our logic. Inside this function I will write a simple collection of items with a name “values” by the $scope object. and inside that I passed a array list. It contains key values pears, I have names and values assigned to them.

Step 2) The HTML File:

So what is this now? This is the main HTML file containing the AngularJS directives  as shown below.

Description:

First of all I will connect the javascript page with my controller directive HTML page with the help of “script“. In this script I will give the source of my java page as I gave that name “controller.js“. I took a simple HTML file and in the main HTML tag I passed a directives of AngularJS. This directives  contains the a value which I used in module function. It will connect with the module “SecondApp”.

Inside the body tag I took a simple div tag and passed AngularJS “controller directive“. It allows you to connect with the controller function in the controller directive javascript file. I had passed the name “MyController” in it which I passed previously in my controller function in controller directive javascript file. Now we can do the logical things inside my “div” tag.

This is known as “$scope inheritance“.

Now my goal is to display the list of objects in my controller directive javascript file. So for this purpose I took an “unordered” list tag and in that tag I took “list items” tag. Now I have to deal with the collection of data so I used the directives “ng-repeat“. This directive act like a “foreach loop” because it works same like that. As I wrote value in values so the values word is the same I used In “controller” function with $scope object, because it contain the list of objects I want to pass.

In the last the list item I placed an expression which contains what I wanted to display. I wrote the name which I used in th ng-repeat directives “value” and with this I passed my key by placing a dot(.) between them.

When all this is completed the ng-repeat directives  will generate the list of objects stored in the my key “name” during runtime.

Step 3) Images Description:

The images are provided for you view only. So that you can easily get the idea what the result will look like in the end.

Controller Directives

Description:

As you see the browser has shown me the out put. It contain that list data whic was stored in javascript collection. Now just click the “F12” key from the keyboard what will you see? You will see that the function is calling all the data in to my list tag. The image is shown below.

Controller Directive

Description:

As you can see that the list tag contains all my data from javascript. The ng-controller function called all the data with help of object $scope. This is displayed in the body of HTML file while in actual there is nothing such thing I wrote there. I only used the directive and passed my expression in it.

Precautions:

Keep in mind always assign a logic full name to you file and the names are case sensitive. What ever you pass inside the function you have to use it same. The changes will not give you the output you wanted to.

Conclusion:

What we learned today from this lecture? The use of two basics things, The use of controller directive with $scope object. We also learned the use of ng-repeat directive, it acts like a foreach loop. We learned a little about javascript also while using it’s predefined function. Hope you liked my this lecture. Mt previous lecture AngularJS Development – Hello Word will help you also in many things so do read that one.