Directives - AngularJS
AngularJS Directives are indicators to AngularJS compiler to attach some behaviour to HTML DOM elements.
AngularJS comes with some built-in directives but you can create your own custom directive.
Some main AngularJS directives are:
- ng-app
- ng-bind
- ng-class
- ng-init
- ng-model
- ng-switch
- ng-repeat
ng-app Directive
The ng-app directive is used for defining the root element of the AngularJS Application.
We mainly define ng-app directive on the <body> or <html> element but we can use ng-app directive with any DOM element.
ng-bind Directive
The ng-bind directive is attached with HTML DOM element and replace its text with the value of ng-bind expression.
Whenever ng-bind expressions variables value changes, it automatically reflect in the HTML DOM element text.
ng-bind is like one-way binding to DOM element.
ng-class Directive
The ng-class directive is used for set CSS classes on DOM element dynamically.
boldCss and italicCSS will only be applied when isBold and isItalic is set to true.
In the above code, isBold is true and isItalic is false. So on span text only bold css will be applied.
ng-init Directive
The ng-init directive is used for evaluating an expression.
Main use of ng-init is for initializing the data.
In above code, I have initialized the name variable in the ng-init directive with 'michale' value.
ng-model Directive
The ng-model directive is used for binding the input controls like textbox, checkbox, select list, textarea to javascript variables.
ng-model denotes two-way binding.
Any changes in input controls is reflected in the javascript variables.
ng-switch Directive
The ng-switch directive is used for conditional show hide DOM elements.
ng-switch expression value is check with ng-switch-when condition value if found true then content of ng-switch-when is displayed.
ng-switch-default is shown when no matching conditions found.
ng-repeat Directive
The ng-repeat is like the foreach loop in any programming language. It iterate over a array of javascript and display template for each item.