AngularJs Directive for the beginner

Sunday, January 31st, 2016 (1 Comment)

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):

Demo

<!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>

<!DOCTYPE html>

<html>

<head>

</head>

<h1>Input value:</h1>

<br/>

<h1>Show value input:</h1>

<div ng-init="newdata='init a value using ng-init'">{{newdata}}</div>

</div>

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:

Input value:
< Welcome to website lvtutorial.com > --enter value
Show value input:
Welcome to website lvtutorial.com
init a value using ng-init

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”

Demo

<!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>

<!DOCTYPE html>

<html>

<head>

</head>

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:

Welcome to the website lvtutorial.com

1	Welcome to the website lvtutorial.com

Example 2: create form input profile using own directive

Demo

<!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>

<!DOCTYPE html>

<html>

<head>

</head>

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:

Username: <input>
Fullname: <input>
Password: <input>
<save button>

Username: <input>

Fullname: <input>

Password: <input>

One Comment:

WilliamCax May 29, 2016

I truly appreciate this article.Really looking forward to read more. Awesome. Laliotis

Reply

Angularjs filter checkbox examples mvc	Angularjs listbox examples mvc
Angularjs combobox examples mvc	Create update delete CRUD in Angularjs MVC

Lvtutorial

Basic Programming Blog

AngularJs Directive for the beginner

1. What is AngularJs Directive ?

2. Define AngularJs Directive

One Comment:

Leave a Reply Cancel reply

Most Viewed

Tutorials

Tags

Lvtutorial on Facebook

Recent Posts

AngularJs Directive for the beginner

1. What is AngularJs Directive ?

2. Define AngularJs Directive

Related Posts

Related Posts

One Comment:

Leave a Reply Cancel reply

Most Viewed

Tutorials

Tags

Lvtutorial on Facebook

Recent Posts