HTML Advance
Html5 Grid
Html5 Graphics
Html5 Media
Introduction to AngularJS
AngularJS Tutorial
The following table lists the important built-in AngularJS directives.
Directive | Description |
---|---|
ng-app | Auto bootstrap AngularJS application. |
ng-init | Initializes AngularJS variables |
ng-model | Binds HTML control's value to a property on the $scope object. |
ng-controller | Attaches the controller of MVC to the view. |
ng-bind | Replaces the value of HTML control with the value of specified AngularJS expression. |
ng-repeat | Repeats HTML template once per each item in the specified collection. |
ng-show | Display HTML element based on the value of the specified expression. |
ng-readonly | Makes HTML element read-only based on the value of the specified expression. |
ng-disabled | Sets the disable attribute on the HTML element if specified expression evaluates to true. |
ng-if | Removes or recreates HTML element based on an expression. |
ng-click | Specifies custom behavior when an element is clicked. |
The ng-app directive initializes AngularJS and makes the specified element a root element of the application.
For Example:
The ng-init directive can be used to initialize variables in AngularJS application.
The following example demonstrates ng-init directive that initializes variable of string, number, array, and object.
Create a variable when initiating the application:
For Example:
The ng-model directive is used for two-way data binding in AngularJS.
It binds <input>, <select> or <textarea>elements to a specified property on the $scope object.
So, the value of the element will be the value of a property and vica-versa.
For Example:
The ng-bind directive binds the model property declared via $scope or ng-model directive or the result of an expression to the HTML element.
It also updates an element if the value of an expression changes.
Bind the innerHTML of the <p> element to the variable myText.
For Example:
The ng-controller directive adds a controller to your application.
In the controller you can write code, and make functions and variables,
which will be parts of an object, available inside the current HTML element.
In AngularJS this object is called a scope.
For Example:
The ng-repeat directive repeats HTML once per each item in the specified array collection.
For Example:
The ng-if directive creates or removes an HTML element based on the Boolean value returned from the specified expression. If an expression returns true then it recreates an element otherwise removes an element from the HTML document.
The ng-readonly directive makes an HTML element read-only, based on the Boolean value returned from the specified expression. If an expression returns true then the element will become read-only, otherwise not.
The ng-disabled directive disables an HTML element, based on the Boolean value returned from the specified expression. If an expression returns true the element will be disabled, otherwise not.