Wednesday , January 17 2018
Home / angularjs / AngularJs Directive Example Tutorials

AngularJs Directive Example Tutorials

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

  • ng-app
  • ng-model
  • ng-init
  • ng-controller
  • ng-repeat
  • ng-show
  • ng-hide
  • ng-if
  • ng-switch

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.

About chandrashekhar

you have reach this so far, that shows you like what you are learning. Then why don’t you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,


AngularJs Custom Service Example

In the previous tutorials we have discussed about what is AngularJs service, what are all …

Leave a Reply

Your email address will not be published. Required fields are marked *