In this tutorials, you will see what is AngularJs Directive and how to work with Angular Directive.
In AngularJs application development, there is a provision to divide an application into three pieces, as Model, View, Controller. Since AngularJs supports MVC pattern.
Here the views (.html, .jsp, .asp and Etc.,) are developed by using the HTML tags and AngularJs Directives.
AngularJs uses the HTML page as a template and generates the dynamic content at runtime.
What is AngularJs Directive ?
Directives are used as HTML attributes.
AngularJs Directives can extend the behaviour of HTML tags.
Every view in AngularJs is depend on the directive.
AngularJs provides set of built in directives, which extends the HTML with new attributes.
AngularJs Directive :
We can easily figure-out, which are directives in AngularJs since all directives are starts with “ng-“
[tie_list type=”checklist”]
- ng-app
- ng-model
- ng-init
- ng-controller
- ng-repeat
- ng-show
- ng-hide
- ng-if
- ng-switch
[/tie_list]
ng-app :
np-app directive defines the root element of the AngularJs application. All AngularJs applications should have a root element.
ng-model :
ng-model directive is used to bind the html element to AngularJs controller attribute with the help of $scope.
ng-init :
ng-init directive is used to initialize the AngularJs application. We can bind the initial values to html elements using ng-init directive.
ng-controller :
ng-controller directive is used to adding controllers to AngulrJs application.
ng-repeat :
ng-repeat directive is used to iterate the given set of elements. It is used to display the array of elements in HTML page.
ng-show / ng-hide :
ng-show /ng-hide directives are used to showing and hiding the HTML elements on view. Based on the parameter(expression : True/False) provided for these directives those can act accordingly.
ng-if :
ng-if directive is used to remove the elements. It is something similar to ng-hide directive but ng-hide just hide the elements where as ng-if completely removed the elements from DOM.
ng-switch :
If we have multiple conditions to apply show/hide, we can go with ng-switch directive.
