Definition – AngularJS directive adds angularJS functionalities to HTML.
or
AngularJs Directives introduces AngularJS to HTML.
or
AngularJs Directives enables AngularJs to work with HTML.
or
AngularJs Directives allows HTML to extend with AngularJS attributes.
Syntax – ng-
AngularJS Directive- There are total 55 Directives and we can also create our own directives.
Most Useful directives are following :
- ng-app: Starts an AngularJS Application.
- ng-init: Initializes data.
- ng-model: A variable to be used in AngularJS.
- ng-repeat: Repeats for each item in a collection.
Now look on below example –
<!DOCTYPE html>
<html ng-app="">
<body>
<h1>AngularJS Directives Example</h1>
<div ng-init="names=['Alice', 'Bob', 'Charlie']">
<input type="text" ng-model="newName">
<button ng-click="names.push(newName)">Add Name</button>
<ul>
<li ng-repeat="name in names">{{name}}</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</body>
</html>
Note – Although above example is simple to understand the concept, but you can see we didn’t define controller/module etc and practically in your project you would need to add them, so now look on below example which is similar to above one but below is recommended and considered good practice.
<!DOCTYPE html>
<html ng-app="myApp">
<body ng-controller="MyController">
<h1>AngularJS Directives Example</h1>
<div ng-init="names=['Alice', 'Bob', 'Charlie']">
<input type="text" ng-model="newName">
<button ng-click="addName()">Add Name</button>
<ul>
<li ng-repeat="name in names">{{name}}</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.addName = function() {
$scope.names.push($scope.newName);
$scope.newName = '';
};
});
</script>
</body>
</html>
This is list of all 55 directives below to try –
| Directive | Description |
|---|---|
| ng-app | Defines the root element of an AngularJS application |
| ng-bind | Binds the content of an HTML element to an expression |
| ng-bind-html | Binds the innerHTML of an HTML element to an expression, and parses the expression for HTML content |
| ng-bind-template | Binds the content of an HTML element to a template |
| ng-blur | Binds an event handler function to the blur event |
| ng-change | Binds an event handler function to the change event |
| ng-checked | Binds the checked state of a checkbox or radio button to an expression |
| ng-class | Binds the class attribute of an HTML element to an expression |
| ng-class-even | Binds the class attribute of an HTML element to an expression when the element is even-indexed |
| ng-class-odd | Binds the class attribute of an HTML element to an expression when the element is odd-indexed |
| ng-click | Binds an event handler function to the click event |
| ng-cloak | Hides an element until AngularJS has compiled the element |
| ng-controller | Defines the controller for a section of HTML |
| ng-copy | Binds an event handler function to the copy event |
| ng-csp | Enables/disables the Content Security Policy |
| ng-cut | Binds an event handler function to the cut event |
| ng-dblclick | Binds an event handler function to the dblclick event |
| ng-disabled | Binds the disabled state of an HTML element to an expression |
| ng-focus | Binds an event handler function to the focus event |
| ng-form | Creates an AngularJS form element |
| ng-hide | Hides an element based on an expression |
| ng-href | Binds the href attribute of an anchor element to an expression |
| ng-if | Conditionally includes an element based on an expression |
| ng-include | Includes HTML content from an external file |
| ng-init | Initializes data |
| ng-keydown | Binds an event handler function to the keydown event |
| ng-keypress | Binds an event handler function to the keypress event |
| ng-keyup | Binds an event handler function to the keyup event |
| ng-list | Binds the value of a textarea element to an expression, as an array of strings |
| ng-model | Binds an input, select, or textarea element to a variable |
| ng-mousedown | Binds an event handler function to the mousedown event |
| ng-mouseenter | Binds an event handler function to the mouseenter event |
| ng-mouseleave | Binds an event handler function to the mouseleave event |
| ng-mousemove | Binds an event handler function to the mousemove event |
| ng-mouseover | Binds an event handler function to the mouseover event |
| ng-mouseup | Binds an event handler function to the mouseup event |
| ng-non-bindable | Prevents AngularJS from compiling the contents of an element |
| ng-options | Generates a list of <option> elements based on an expression |
| ng-paste | Binds an event handler function to the paste event |
| ng-pattern | Validates the input value against a regular expression pattern |
| ng-pluralize | Conditionally pluralizes a message based on a number |
| ng-readonly | Sets the element as read-only if the expression evaluates to true |
| ng-repeat | Repeats an HTML element for each item in a collection |
| ng-selected | Sets the selected attribute on an option element if the expression evaluates to true |
| ng-show | Shows or hides an element based on the expression value |
| ng-src | Binds the source attribute of an image element to an expression |
| ng-style | Sets inline CSS styles based on the expression value |
| ng-submit | Executes an expression when a form is submitted |
| ng-switch | Conditionally inserts an HTML element based on the expression value |
| ng-switch-when | Specifies a case for the ng-switch directive |
| ng-switch-default | Specifies the default case for the ng-switch directive |
| ng-transclude | Transcludes the content of an HTML element into a directive |
| ng-value | Binds the value attribute of an input element to an expression |
Core Java in 25 hours 