Saturday, 22 December 2018

What is AngularJS Directives


AngularJS Directives

Directives are attributes starting with ng- prefix that provide the way to you to extend the HTML with new attributes called Directives.

AngularJS provides lot of build-in directives that can be used to extend the html. You can also create your own (custom) directives.

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.

AngularJS Directives Example

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="TestController" ng-init="message='Guest'">
        First Name: <input type="text" ng-model="firstname"><br>
        Last Name:  <input type="text" ng-model="lastname"><br>
        Address:   <input type="text" ng-model="address">      
        <br>
        <p ng-bind="fullname()"></p>
        <p>Addess: {{address}} </p>
    </div>
    <script>
        var myapp = angular.module('myApp', []);
        myapp.controller('TestController', function ($scope) {
            $scope.firstname = "Alok";
            $scope.address = "Delhi";
            $scope.lastname = "Singh"
            $scope.fullname = function () {
                return $scope.firstname + " " + $scope.lastname;
            };
        });
    </script>
</body>
</html> 

ng-app directive: This directive starts an AngularJS Application.

<div ng-app="myApp" ng-controller="TestController">
       ----
-----
</div>
ng-init directive:   ng-init directive initializes the initial values for an AngularJS application.

<div ng-app="myApp" ng-controller="TestController" ng-init="message='Guest'">
        <p>welcome {{message}}</p>
</div>
ng-model directive: This directive defines the model that is variable to be used in AngularJS. ng-model directive can use for two-way binding to bind the model to the view.

<div ng-app="myApp" ng-controller="EmployeeController">
    Name: <input type="text" ng-model="WebsiteName" />
    <p ng-bind="WebsiteName"></p>
    <p>{{WebsiteName}}</p>
</div>


<script>
    var myapp = angular.module('myApp', []);
    myapp.controller('EmployeeController', function ($scope) {
        $scope.WebsiteName = "www.code-view.com";       
    });
</script>

There of list of directive available in AngularJS.
AngularJS provide facility that you can also create our own or custom directive

AngularJS Custom Directive

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" welcome-directive></div>
    <script>
        var myapp = angular.module("myApp", []);
        myapp.directive("welcomeDirective", function () {
            return {
                template: "This is a custom directive"
            };
        });
    </script>
</body>
</html>