DotNet Developer Blog: March 2016

Sunday, 20 March 2016

Priority option in the custom directive in angular js

In this post we are going to see the priority option in the angular directive, why we need the priority option in directive, it is because we can use the more than one directive in the single element, Now we see the example for this

Expected Output:

To check for this option we will create a directive , on that directive we will use another two directive which will change the font and color of the directive. Now we will see the code

HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="angular.min.js"></script>
    <script type="application/javascript" src="mod.js"></script>
</head>
<body ng-app="app">
<div ng-controller="mainController">
    <hello-world red-font medium-size></hello-world>
</div>
</body>
</html>

From the above you can see the hello-world directive have two directives on the same element which will change the font size and color of the element

Directive:

var app = angular.module('app',[]);

app.controller('mainController',['$scope',function($scope){

}]);


app.directive('helloWorld', function () {
    return{
        restrict:'E',
        scope:{

        },
        template:'<div>Hello world {{Name}} . By Rajesh G , Architect</div>',
        controller: function ($scope) {
            $scope.Name = "Angular";
        },
        link: function (scope,element,attrs) {

        }
    }
});

app.directive('mediumSize', function () {
   return{
       restrict:'A',
       priority:10,
       compile: function (scope,element) {
           console.log('mediumSize called in compile Function');

           return function (scope, element, attrs) {
               element.css('font-size','20px');
               console.log('mediumSize called in Link Function');
           }
       }
   }
});

app.directive('redFont', function () {
    return{
        restrict:'A',
        priority:20,
        compile: function () {
            console.log('RedFont called in compile function');

            return  function (scope,element,attrs) {
                element.css('color','red');
                console.log('RedFont called in Link function');
            }
        }
    }
});

Log :
From the code you can see the redFont directive have more priority than mediumSize priority, so it will execute first, so compile function of redfont execute first and Link function of that directive execute last.

Output:

From this post you can see how to use the priority option in directive.

Delete the duplicate records from the Table SQL SERVER

In this post we are going to see how to delete the duplicate records from the table using SQL SERVER. For this we are going to create a employee table and insert a duplicate records.

CREATE TABLE EMPLOYEE(

ID INT PRIMARY KEY IDENTITY(1,1) NOT NULL,

FIRSTNAME VARCHAR(50),

LASTNAME VARCHAR(50),

DESIGNATION VARCHAR(50),

PHONE INT,

DEPARTMENTID VARCHAR(30)

)

/************** Insertion of the records ************/