AngularJS facilitates you to extend HTML with new attributes. These attributes are called directives.
There is a set of built-in directive in AngularJS which offers functionality to your applications. You can also define your own directives.
Directives are special attributes starting with ng- prefix. Following are the most common directives:
- ng-app: This directive starts an AngularJS Application.
- ng-init: This directive initializes application data.
- ng-model: This directive defines the model that is variable to be used in AngularJS.
- ng-repeat: This directive repeats html elements for each item in a collection.
ng-app directive
ng-app directive defines the root element. It starts an AngularJS Application and automatically initializes or bootstraps the application when web page containing AngularJS Application is loaded. It is also used to load various AngularJS modules in AngularJS Application.
See this example:
In following example, we’ve defined a default AngularJS application using ng-app attribute of a div element.
<div ng-app = "">
...
</div>ng-init directive
ng-init directive initializes an AngularJS Application data. It defines the initial values for an AngularJS application.
In following example, we’ll initialize an array of countries. We’re using JSON syntax to define array of countries.
<div ng-app = "" ng-init = "countries = [{locale:'en-IND',name:'India'}, {locale:'en-PAK',name:'Pakistan'}, {locale:'en-AUS',name:'Australia'}]">
...
</div>ng-model directive:
ng-model directive defines the model/variable to be used in AngularJS Application.
In following example, we’ve defined a model named “name”.
<div ng-app = "">
...
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>ng-repeat directive
ng-repeat directive repeats html elements for each item in a collection. In following example, we’ve iterated over array of countries.
<div ng-app = "">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>AngularJS directives Example
Let’s take an example to use all the above discussed directives:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Directives</title>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app = "" ng-init = "countries = [{locale:'en-IND',name:'India'}, {locale:'en-PAK',name:'Pakistan'}, {locale:'en-AUS',name:'Australia'}]">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>AngularJS Directives List
AnglarJS directives are used to add functionality to your application. You can also add your own directives for your applications.
Following is a list of AngularJS directives:
| Directive | Description |
|---|---|
| ng-app | It defines the root element of an application. |
| ng-bind | It binds the content of an html element to application data. |
| ng-bind-html | It binds the inner HTML of an HTML element to application data, and also removes dangerous code from the html string. |
| ng-bind-template | It specifies that the text content should be replaced with a template. |
| ng-blur | It specifies a behavior on blur events. |
| ng-change | It specifies an expression to evaluate when content is being changed by the user. |
| ng-checked | It specifies if an element is checked or not. |
| ng-class | It specifies css classes on html elements. |
| ng-class-even | It is same as ng-class, but will only take effect on even rows. |
| ng-class-odd | It is same as ng-class, but will only take effect on odd rows. |
| ng-click | It specifies an expression to evaluate when an element is being clicked. |
| ng-cloak | It prevents flickering when your application is being loaded. |
| ng-controller | It defines the controller object for an application. |
| ng-copy | It specifies a behavior on copy events. |
| ng-csp | It changes the content security policy. |
| ng-cut | It specifies a behavior on cut events. |
| ng-dblclick | It specifies a behavior on double-click events. |
| ng-focus | It specifies a behavior on focus events. |
| ng-hide | It hides or shows html elements. |
| ng-href | It specifies a URL for the <a> element. |
| ng-if | It removes the html element if a condition is false. |
| ng-include | It includes html in an application. |
| ng-init | It defines initial values for an application. |
| ng-jq | It specifies that the application must use a library, like jQuery. |
| ng-keydown | It specifies a behavior on keydown events. |
| ng-keypress | It specifies a behavior on keypress events. |
| ng-keyup | It specifies a behavior on keyup events. |
| ng-list | It converts text into a list (array). |
| ng-open | It specifies the open attribute of an element. |
| ng-options | It specifies <options> in a <select> list. |
| ng-paste | It specifies a behavior on paste events. |
| ng-pluralize | It specifies a message to display according to en-us localization rules. |
| ng-readonly | It specifies the readonly attribute of an element. |
| ng-required | It specifies the required attribute of an element. |
| ng-selected | It specifies the selected attribute of an element. |
| ng-show | It shows or hides html elements. |
| ng-src | It specifies the src attribute for the <img> element. |
| ng-srcset | It specifies the srcset attribute for the <img> element. |
| ng-style | It specifies the style attribute for an element. |
| ng-submit | It specifies expressions to run on onsubmit events. |
| ng-switch | It specifies a condition that will be used to show/hide child elements. |
| ng-transclude | It specifies a point to insert transcluded elements. |
| ng-value | It specifies the value of an input element. |
| ng-disabled | It specifies if an element is disabled or not. |
| ng-form | It specifies an html form to inherit controls from. |
| ng-model | It binds the value of html controls to application data. |
| ng-model-options | It specifies how updates in the model are done. |
| ng-mousedown | It specifies a behavior on mousedown events. |
| ng-mouseenter | It specifies a behavior on mouseenter events. |
| ng-mouseleave | It specifies a behavior on mouseleave events. |
| ng-mousemove | It specifies a behavior on mousemove events. |
| ng-mouseover | It specifies a behavior on mouseover events. |
| ng-mouseup | It specifies a behavior on mouseup events. |
| ng-non-bindable | It specifies that no data binding can happen in this element, or it’s children. |
| ng-repeat | It defines a template for each data in a collection. |
How to add directives
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "This is a directive constructor. "
};
});
</script>
</body>
</html>
Leave a Reply