Get all updates of Java4s
Follow Us: Email 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

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

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:

ng-model

This directive will bind(hold) the state(value) of the current HTML things (input, textarea…etc).

Example:

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 ]

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 Author ♦

Java4s_Author
sivateja@java4s.com
Full Stack( Java/J2EE & UI/UX ) Developer and founder of Java4s - Get It Yourself, A popular Java/J2EE Programming Blog. 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.
What would you like to learn today?
Browse these popular technologies
Hibernate spring struts Servlets ajax Log4j jQuery Json Core Java Web Services AngularJs
Most Recent Tutorials
Hibernate_Logo Hibernate Recent Posts Spring_Logo Spring Recent Posts Struts_Logo Struts Recent Posts
Useful Links Current & UpComing Tutorials
Upcoming
  Web Services [ SOAP ], JSP
Contact | About Us | Privacy Policy | Advertise With Us

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