| Newsletter |
AngularJS Directives Tutorial
In this article i will describe about the directives in the AngularJs. Simply in a single line we can say, angular directives will extend the functionality of HTML elements. We will use these directives as an attribute for the HTML elements. AngularJS directives will start with prefix ‘ng-‘. For example ng-app, ng-model, ng-init ..etc. For an instance consider the following HTML code
<input type="text" name="name">
As i told you earlier (we will use angular directives as attributes for HTML elements) we can write ‘ng-model’ directive as a new attribute for the above ‘input’ tag. So we can re-write the above input field as..
<input type="text" name="name" ng-model="modelName">
Note: This is how we can use angular directives as HTML element attributes. I will explain how ‘ng-model’ will extend the functionality
of the input field later.
In angularjs we have many directives, hmm i cannot explain the functionality of each and every directive here :-), but there are few directives, which we will use very often in our code, so for now i will explain them. However in the up coming tutorials if we use any new directive, i will explain about it in those examples 😉
So.. these are very basic & famous directives of AngularJS..,
- ng-app
- ng-model
- ng-repeat
- ng-controller
ng-app
This directive indicate the starting point of AngularJS application, i mean we have to write angular related code inside of ‘ng-app‘.
Example:
<html> <head>AngularJS ng-app Example</head> <body ng-app=""> <!-- Other HTML, AngularJS code goes here.. --> </body> </html>
ng-model
This directive will bind(hold) the state(value) of the current HTML things (input, textarea…etc).
Example:
<html>
<head>AngularJS ng-model Example</head>
<body ng-app="">u
<input type="text" name="name" ng-model="modelName"> {{modelName}}
</body>
</html>How ng-model works ?
If you write something in the input text box, ng-model will save that value into ‘modleName‘ string, for example if i write my name ‘Sivateja’ in the input textbox, internally angular will take it as
modelName = Sivateja
And we can print the value by using double curly braces {{ modelName }} , that’s it 🙂 | Click Here for the Live Example
ng-repeat
The main purpose of ‘ng-repeat’ directive is, it will repeat the HTML elements. Not exactly but i can tell you its something like ‘for‘ loop, hmm… like if we need to display Array or JSON data which we are getting from the back end, then we will do it by using ‘ng-repeat’ directive.
Example: [ right now i cannot show you how to get the array/json data from the back end 🙂 but for now i am taking some fake JSON data using ‘ng-init’ directive ]
<html>
<head>AngularJS ng-repeat Example</head>
<body ng-app="">
<div ng-init="details=[{name:'James',age:'24'},{name:'Rose',age:'21'}]">
<ul>
<li ng-repeat="data in details">
{{data.name}} - {{data.age}}
</li>
</ul>
</div>
</body>
</html>Output:
- James – 24
- Rose – 21
ng-controller
Nothing more here, by using this directive we will tell our controller name to our application, that’s it. | Click here for complete explanation and example on ng-controller. Moreover we can create our own directives as well, regarding that i will explain you in the next article 😉
You Might Also Like
::. About the Author .:: | ||
 | ||
It very good for beginers….
Thank You Shiva
The Nice One………. Will u pls provide the full articles…
A good one.
Waiting for your upcoming articles desperately..
Hi
How to call restfull service from angularjs ?
@Srikar,
Will post an article on RESTful and AngularJS soon 🙂
Its simple and easy for beginer..