Angular Js allows you to extends HTML with new attributes. These attributes are called Directives.
There are many built-in Directives available in Angular Js, which provides many functionalities to our application. We can also define our own Directive in Angular Js.
Directives are the special attributes starting with ng- prefix.
Following is the complete List of Directives in Angular Js with a brief description.
There are many built-in Directives available in Angular Js, which provides many functionalities to our application. We can also define our own Directive in Angular Js.
Directives are the special attributes starting with ng- prefix.
Following is the complete List of Directives in Angular Js with a brief description.
| 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-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-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 element. |
| ng-if | It removes the html element if a condition is false. |
| ng-init | It defines initial values for an application. |
| ng-include | It includes html in an application. |
| ng-readonly | It specifies the read only attribute of an element. |
| ng-required | It specifies the required attribute of an element. |
| ng-model | It binds the value of html controls to application data. |
| ng-repeat | It defines a template for each data in a collection. |
In this article I'll show you some of them directives rest of the directives will get covered as this tutorial series progresses.
Repeating HTML elements (ng-repeat)
<div ng-app="" ng-init="Students=['Rohit','Rahul','Akshay']">
<ul>
<li ng-repeat="S in Students">
{{S}}
</li>
</ul>
</div>
In the above example I've created an array with 3 names and using ng-init directive and then prints them all in the <ul> <li> tag using ng-repeat(it works like a loop in any other programming language)
Output:
- Rohit
- Rahul
- Akshay
The ng-app Directive
The ng-app directive defines the root element of an Angular JS application.It will automatically initialize the application when a page is loaded.
The ng-init Directive
The ng-app directive defines the initial values of an Angular JS application.
The ng-model Directive
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
How to create our Own Custom Directive
In Angular Js we can create our own custom directives using .directive function. To invoke the new directive make an HTML element with the same tag name as the new directive.
(Note: when naming a directive, we must use a camel case name, MyDirective, but when invoking it, we must use - separated name, My-Directive).
Let's look at an example.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "<i>Made by a directive!</i>"
};
});
</script>
</body>
</html>
Output
Made by a directive!
No comments:
Post a Comment