Newsletter

AngularJS Directives Tutorial

AngularJs » on Nov 28, 2014 { 7 Comments } By Sivateja

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 .::

Java4s_Author
Sivateja Kandula - Java/J2EE Full Stack Developer
Founder of Java4s - Get It Yourself, A popular Java/J2EE Programming Blog, Love Java and UI frameworks.
You can sign-up for the Email Newsletter for your daily dose of Java tutorials.

Comments

7 Responses to “AngularJS Directives Tutorial”
  1. jagadheeswar mekalakondala says:

    It very good for beginers….

  2. bhadra says:

    Thank You Shiva

  3. sunny says:

    The Nice One………. Will u pls provide the full articles…

  4. asif says:

    A good one.

    Waiting for your upcoming articles desperately..

  5. srikar says:

    Hi
    How to call restfull service from angularjs ?

  6. Siva says:

    @Srikar,

    Will post an article on RESTful and AngularJS soon 🙂

  7. Sainath Surkuntlawar says:

    Its simple and easy for beginer..

Name*
Mail*
Website



By posting your answer, you agree to our comments policy.
Most Recent Posts from Top Categories
Spring Boot Hibernate Spring
Contact | About Us | Privacy Policy | Advertise With Us

© 2010 - 2024 Java4s - Get It Yourself.
The content is copyrighted to Sivateja Kandula and may not be reproduced on other websites.