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:
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.
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.
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.
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 denotes two-way binding.
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.