AngularJS tutorials and examples

Angularjs is a web application framework which has gained lot of popularity in mobile and single page applications. It uses directive ng-app to represent root read more

The ng-init directive allows you to evaluate an expression in the current scope. This can be used to initialize model values. Usage: Example Initialize date read more

The ngModel directive binds an input, select, textarea to a property on the scope using NgModelController. One can also bind same property on multiple input read more

Angularjs basic controller example to initialize a number in view, and then increment it on button click. We’ll use controller, template and ng-click directive. The read more

Angularjs basic controller clock example to display date and update it every second. We’ll use controller, template and $timeout. We used AngularJS $timeout here. If read more

Angularjs basic ajax example to display value returned from ajax server call. We’ll use controller, template and $http for this tutorial. Angularjs Ajax GET example read more

Angularjs filter can be used in angular js expression using pipe. Here is an example of AngularJS inbuilt filter date to format Javascript Date to read more

Angularjs ng-include can be used to include inline or external (url) templates. This tutorial will cover including url template using ng-include. ng-include usage Template used read more

Angularjs ng-include can be used to include internal or external (separate url) templates. This tutorial will cover including inline template using ng-include. ng-include usage Example read more

Angularjs ng-switch directive is used to conditionally swap DOM structure on your template based on a scope expression. ng-switch usage Example – horizontal tabs using read more

Angularjs ng-style directive can be used to define inline style attribute which can define dynamic style values using variables. Usage: Note that expression evals to read more

Angular ngAnimate can be used to create animation effect using animation aware directives. Usage: Example – animate with ng-class This example uses ng-class to toggle read more

Angular ng-if directive removes or recreates a portion of the DOM tree based on an expression (true or false). On the other hand ng-show (or read more

AngularJS ng-bind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression. It also updates read more

AngularJS ng-bind-html directive can be used to insert html into an element. Here is sample usage: Few points to note: One need to include ngSanitize read more

AngularJS ng-bind-template attribute take a template string and can contain multiple {{ }} expressions.

AngularJS ng-blur expression is evaluated when an element (window, input, select, textarea, a) loses focus.

AngularJS ng-change expression is evaluated when the user changes the input.

AngularJS ng-checked sets the checked attribute on the element, if the expression inside ng-checked is true.

AngularJS ng-class directive allows you to dynamically set CSS classes on an element using an expression. The expression can be of one of these three read more

AngularJS directives ng-class-even and ng-class-odd work like ng-class except that when these are used with ng-repeat, these apply to even and odd rows.

Example1 AngularJS ng-click example to increment a variable on every click. Example2 AngularJS ng-click example to increment a variable on every click. This time use read more

AngularJS ng-cloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your read more

Example1 AngularJS ng-gblclick example to increment a variable on every double click. Example2 AngularJS ng-dblclick example to increment a variable on every double click. This read more

AngularJS directive ng-disabled sets the disabled attribute on the element if the expression ng-disabled evaluates to true.

AngularJS ng-focus expression is evaluated when an element (window, input, select, textarea, a) gets focus.

AngularJS directive ng-hide hides an element if the expression ng-hide evaluates to true. Under the hood it adds or removes class ng-hide to the element. read more

AngularJS directive ng-href can be used to use a template to create href. Directly using it in href can make the link broken before Angular read more

Angular ng-if directive removes or recreates a portion of the DOM tree based on an expression (true or false). Usage: Example – ng-if without animation read more

AngularJS ng-list directive can be used in text input and it converts between a delimited string and an array of strings. The default delimiter is read more