Frequently used in-built AngularJS Directives with easy Examples

Today AngularJS is one of the most popular JS Framework. It was developed & maintained by Google. AngularJS popularity is behind its key features. Some of the advanced key features of AngularJS are Model, View, Controller, Search Filter, Directives, One way & Two way Data binding etc. Are you going to Get Started with AngularJS programming. If so this session can very helpful for you. In this session we are presenting the most frequently used in-built directives of AngularJS. To make your learning easier here we are also sharing easy examples.

Frequently used in-built AngularJS Directives

ng-repeat - To run a loop in HTML AngularJS provides ng-repeat directive. ng-repeat works like a for loop. Let's take a case where you want to show list of Country names in a Combo box. In this case if you are using HTML ul li element then to show list of values in Combo box you can apply ng-repeat to li element. Look at this example http://jharaphula.com/example-to-create-treeview-using-angularjs.

ng-repeat with Search filter - As we discussed above AngularJS is rich with powerful Search facility. To implement search we don't required to write our own functions or methods. By simply calling filter with any data bind directive we can easily implement Search facility. Look at this example how I implemented AngularJS Search filter http://jharaphula.com/example-of-using-search-filter-in-angularjs.

ng-view - ng-view is like a div or span control of HTML. Generally during we design a Single Page Application (SPA) ng-view comes into picture. Let's i have a Company website. I want to update contents in content area depending upon the tab click. In this case ng-view act like a Container. Look at this example http://jharaphula.com/example-of-using-angularjs-routing you can easily understood.

ng-show & ng-hide - These directives we used to show or hide contents. ng-show and ng-hide works similar. Check with this example how I used these directives http://jharaphula.com/how-to-use-switch-case-in-angularjs.

ng-model - In AngularJS ng-model is used to identify a Control for the use in AngularJS Scope. This is one type of in-built model for Controls. Look at the example how I used ng-model for form field validations http://jharaphula.com/example-of-form-field-validations-using-angularjs.

ng-switch - Every programming language provides Switch case after if else. For more number of Conditional statements Switch case renders better performance. In AngularJS ng-switch is the directive which we used to handle switch case. Look at this example http://jharaphula.com/how-to-use-switch-case-in-angularjs here I used Switch case to update texts inside a div after the change event of dropdownlist. Like default case in Angular we use ng-switch-default. Hope the example can describe you more better.

ng-options - During we display list of records generally we use HTML Select Box. In this example I am binding JSON formatted data using ng-options directives from AngularJS. Whether you go for a Country dropdown or Employee Names this Example Can help you http://jharaphula.com/how-to-bind-data-to-select-control-using-angularjs-ng-options

.............
.......

After these Directives AngularJS provides many more in-built directives. You can also create your own directive in Angular. To know more directives and their uses please visit http://angularjs.org