The complete AngularJS tutorial for beginners. We provide an easy way to learn AngularJS in this tutorial.

Saturday, 16 July 2016

AngularJS Directives

with 0 Comment
Andularjs directives are used to extend the functionality of HTML. Directive functions are used to define custom directives.  Angularjs has a set of built-in directives which provides functionality to your application.  AngularJS application during bootstrap finds the coordinating components and do one-time movement using its compile() method for the custom order then process the component using a link() method for the custom mandate in view of the extent of the mandate. AngularJS gives backing to make custom directives.

  • Attribute.
  • Element directives.
  • CSS.      
  • Comment.

AngularJS Directives Example:   

AngularJS directives are extended HTML attributes with the prefix  ng- .
  • The ng –app directives initializes an angularjs application.
  • The ng –init directives initializes application data.
  • The ng-model directive binds the value of HTML controls (input, select, text area) to application data.
  • The ng-controller directives used to control the value of entire application of the page
  • The ng-repeat directive repeats an HTML element.

<!DOCTYPE html>
<script src=""></script>

<div ng-app="" ng-init="Name='John'">

<p>Enter any values in the below text box:</p>
<p>Name: <input type="text" ng-model="Name"></p>
<p>You wrote: {{ Name }}</p>



Data Binding

The {{ name }} expression, in the example above, is an AngularJS data binding expression.

Data binding in AngularJS binds AngularJS expressions with AngularJS data.

{{ name }} is bound with ng-model="name".

The ng-app Directive

The ng-app directive defines the root element of an AngularJS application.

The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded.

The ng-init Directive

The ng-init directive defines initial values for an AngularJS application.

Normally, you will not use ng-init. You will use a controller or module instead.

You will learn more about controllers and modules later.

The ng-model Directive

The ng-model directive binds the value of HTML controls (input, select, text area) to application data.

The ng-model directive can also:

Provide the status for application data (invalid, dirty, touched, error).

Provide CSS classes for HTML elements.

Bind HTML elements to HTML forms.

Will see all in details in the next session.

You should also know:


Post a Comment