AngularJs Directive for the beginner
In this article we will explore the concept AngularJs Directive, you will find many surprises as we learn it, we have used it in the previous example but did not know it was AngularJs Directive.
1. What is AngularJs Directive ?
Directives is an extension of HTML or attribute of the HTML tags that define Angular, Directive beginning with the prefix <ng->. As in the previous example, to declare a Directive Controller shall we declare ng-controller, it is too simple.
Example: we use three Directives (ng-app, ng-controller, ng-model, ng-bind, ng-init):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body ng-app="lvapp"> <div ng-controller="LVController"> <h1>Input value:</h1> <input ng-model="name" style="width:50%"> <br/> <h1>Show value input:</h1> <span ng-bind="name"></span> <div ng-init="newdata='init a value using ng-init'">{{newdata}}</div> </div> <script language="javascript"> angular.module('lvapp', []) .controller('LVController', function($scope) { $scope.name = 'Welcome to website lvtutorial.com'; }); </script> </body> </html> |
- Line 8: declare ng-app Directive, it will define an application in angularJs
- Line 9: declare ng-controller Directive to handle data
- Line 11: ng-model Directive link data of the application to the control AngularJS of HTML input.
- Line 14: ng-bind Directive mount data of the application AngularJs to HTML tags
- Line 15: ng-init Directive initializes the initial value and display this value.
Output:
1 2 3 4 5 |
Input value: < Welcome to website lvtutorial.com > --enter value Show value input: Welcome to website lvtutorial.com init a value using ng-init |
We will use the directive to declare ng-model and model-bind to retrieve data from the model. But for the two Directives ng-bind and ng-model know each other, then its value must be the same (ng-model = “name”, ng-bind = “name”).
2. Define AngularJs Directive
In addition to the Directive is available, AngularJs also allows users to manually create the custom of own Directive.
Example 1: Build a Directive appear content greeting “Welcome to the website lvtutorial.com”
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body ng-app="lvapp"> <div lv-directive></div> <script language="javascript"> var app = angular.module('lvapp', []); app.directive('lvDirective', function() { return { template: '<h1>Welcome to the website lvtutorial.com</h1>' }; }); </script> </body> </html> |
- Line 9: create own Directive with name is “lv-directive”.
- Line 12: lvDirective corresponds to the lv-directive, meaning you have to set named in javascipt (angularJs) by the rule: lv-directive = lvDirective. In lvDirective, it will return an object key is template, this key is HTML. content of lvDirective.
Output:
1 |
Welcome to the website lvtutorial.com |
Example 2: create form input profile using own directive
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body ng-app="lvapp"> <div lv-profile></div> <script language="javascript"> var app = angular.module('lvapp', []); app.directive('lvProfile', function() { var html = '<table>'; html += '<tr>'; html += '<td>Username:</td>'; html += '<td><input type="text"/></td>'; html += '</tr>'; html += '<tr>'; html += '<td>Fullname:</td>'; html += '<td><input type="text"/></td>'; html += '</tr>'; html += '<tr>'; html += '<td>Password:</td>'; html += '<td><input type="password"/></td>'; html += '</tr>'; html += '<tr>'; html += '<td></td>'; html += '<td><input type="Button" value="Save"/></td>'; html += '</tr>'; html += '</table>'; return { template: html }; }); </script> </body> </html> |
- In this example, template will return html form
Output:
1 2 3 4 |
Username: <input> Fullname: <input> Password: <input> <save button> |
Tags: angularJs, angularjs directive
I truly appreciate this article.Really looking forward to read more. Awesome. Laliotis