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.
<body ng-app>
...
</body>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.
<body ng-app ng-init="firstName='James';">
<span ng-bind="firstName"></span>
...
</body>ng-class Directive
The ng-class directive is used for set CSS classes on DOM element dynamically.
<html>
<head>
<title>First AngularJS App</title>
<style type="text/css">
.boldCSS
{
font-weight: bold;
}
.italicCSS
{
font-style: italic;
}
</style>
</head>
<body ng-app ng-init="isBold=true;isItalic=false;">
<span ng-class="{boldCSS: isBold, italicCSS: isItalic}">This is text.</span>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</body>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.
<body ng-app ng-init="name='Michale'">
{{ name }}
...
</body>
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.
<body ng-app>
<input type="textbox" ng-model="name" />
{{ name }}
...
</body>ng-switch Directive
The ng-switch directive is used for conditional show hide DOM elements.
<body ng-app ng-init="Age=30">
<div ng-switch="Age">
<p ng-switch-when="20">Your age is 20.</p>
<p ng-switch-when="30">Your age is 30.</p>
<p ng-switch-when="40">Your age is 40.</p>
<p ng-switch-default>Age {{ Age }}</p>
</div>
...
</body>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.
<body ng-app ng-init="arrObj=[{name: 'James'},{name: 'Vicky'},{name: 'Sandy'},{name: 'George'}]">
<div ng-repeat="item in arrObj">
<p>{{ $index }} {{ item.name }}</p>
</div>
...
</body>