Top 10 Directives in AngularJS
Directives are the normal HTML Syntax. AngularJS allows you to extend existing HTML syntax with new attributes called as Directives. AngularJS comes with set of inbuilt Directives and all the Directives has individual behaviors.
All the Directives are starts with the prefix of “ng-”. Also AngularJS allows the developer to create custom Directives with custom behaviors.
To Know More about all the Directives and other Topics, Please Visit AngularJS Complete Topics.
Here are the list of Top 10 Directives in AngularJS,
- ng-app
- ng-model
- ng-bind
- ng-click
- ng-controller
- ng-hide / ng-show
- ng-if
- ng-include
- ng-repeat
- ng-submit
1.ng-app:
This directive is used for auto bootstrap an AngularJS Application. It’s also called as root element of an AngularJS. This directive almost placed on <html> or <body>. Without this directive we can’t implement AngularJS in our application.
We can use only one ng-app directive per HTML Document. If you use multiple ng-app directives, the 1st one will be auto bootstrap the application. You can pass application name as a parameter of ng-app .
Syntax:
ng-app=”myApp” .
2.ng-model:
ng-model Directive is used for Bind AngularJS application data into Input elements like text, password, select, check box, radio, etc.,
Syntax:
<element ng-model=”name”></element>
Here the elements are All types of Input elements.
3.ng-bind:
This directive used for bind angularjs application data into the views. We can bind the application data through a variable and whenever the variable value gets change, automatically the view update the value and vice versa.
Syntax:
ng-bind as a Attribute
<element ng-bind=”expression”></element>
ng-bind as a Class
<element class=”ng-bind: expression”></element>
Bind the values by using an expression
{{expression}}
4.ng-click:
ng-click directive just like a onClick event. ng-click allows you to call a angularjs function when an element clicked. We can use onClick and ng-click together in a same element. 1st onClick will trigger after that ng-click event trigger.
Syntax:
<element ng-click=”functionName”></element>
5.ng-controller:
ng-controller directive is used for controller angularjs Application data. Also it allows you to attach your application controller to the view. The controller scopes are based on the element scopes. This ng-controller directive allows nested that we can use a controller within a controller.
Syntax:
<element ng-controller=”expression”></element>
6.ng-hide / ng-show :
ng-hide / ng-show directives are used to show are hide the views (HTML Template) based on the Boolean values. Every ng-hide, ng-show has a expression which having Boolean values.
Syntax:
<element ng-hide=”expression”></element>
If the above expression is true then the element will be hide and if it’s false the element will be show.
<element ng-show=”expression”></element>
If the above expression is true then the element will be show and if it’s false the element will be hide.
7.ng-if:
This directive works like ng-hide but the different is ng-hide just hide the element based on the truthy value and ng-if remove the element based on the truthy value. If the ng-if expression value is false means it will remove from the document and when the value gets true it will again attach the element into the document.
Syntax:
<element ng-if=”expression”></element>
8.ng-include:
ng-directive is used for include external html file into the application. The including html file should be child node of the specified element.
ng-include directive have a expression and the expression have the value of external file name.
Syntax:
ng-include as an element
<ng-include src=”filename”></ng-include>
ng-include as an attribute
<element ng-include=”filename” ></element>
9.ng-repeat:
ng-repeat directive repeat the specific html element until the number of times of an array elements. It clones the html elements at every iteration.
The collection should be an array or object.
Syntax:
<element ng-repeat=”variableName in Array/Object Name”></element>
10.ng-submit:
ng-submit directive like onSubmit event. It will trigger the function while your form submit. This directive attached on form and it will work only when the form doesn’t contain action.
