Directive in angularjs

<h1>{{title}}</h1>
<div ng-repeat="friend in friends">

<h1>{{friend.firstName}}{{friend.lastName}}</h1>
<span>tweets:{{friend.tweets.length}}</span>

so instead of writing the above two ststements we simply create the directives and make use of it
in our entire application.

<contact-card></caontact-card>

or
<div contact-card></div>

go with

<contact-card data="friend">
<h1>contactcard</h1> 
</caontact-card>

Note:
// it won't show in ouput because it is replaced with the directive,
still if we want to see this we need to include the transclude inside the directive.
like transclude:true, even if we include this inside directive we didin't see in output
so we need to another statement <div ng-transclude></div>
inside the our templateurl html page or within the
template inside the directive
i.e
template:"<div ng-transclude></div> <h1>{{friend.firstName}} {{friend.lastName}}</h1>",
i.e anything inside the directive is completely removed

another way to achieve the above functionality is adding attribute to the directive
<contact-card data="friend" title="contact">

</caontact-card>

so as we specify the title="card" as attribute inside the directive,
we included title inside the scope in a directive.
and also changed the
template:"<h1>{{title}}</h1> <h1>{{friend.firstName}} {{friend.lastName}}</h1>",


Note:  <contact-card data="friend" title="contact"> </caontact-card>
In the above ststemnet we included the two attributes data and title, data attribute looking for the friend object data, and
title is looking for Contact object data.

Note:if we want to replace the contact tag from dom after we execute the program, we need to include the
replace: true, inside the directive.
here we need to remember the one point if we use replace: true,we need to place the template data as
inside the container, like the below.here container is div
template:"<div> <h1>{{title}}</h1> <h1>{{friend.firstName}} {{friend.lastName}}</h1> </div>",

if we place without container like below , we get the errors in the console.
template:"<h1>{{title}}</h1> <h1>{{friend.firstName}} {{friend.lastName}}</h1>",

</div>
Note: angularjs automatically converts the hyphenated version to camel case version
example above we mention the directive name as contact-card
but we create the name of directive as contactCard.
contactCard is name of directive.
and second argument fucntion is dependency injection function,
so here we may include others to inside the function.
What this function gonna return is objective.

angular.module("myapp",[])
.directive("contactCard",function(){
return{
restrict:"E",
scope:{
data:"=",
title:"=" // here data the is the name of the attribute we mentioned above in the directive
              here equal to menas binding can happen in both ways
             
}
controller:function($scope){
alert("controller");
console.log("controller");
console.log("$scope.friend");
},
replace: true,
template:"<div> <h1>{{title}}</h1> <h1>{{friend.firstName}} {{friend.lastName}}</h1> </div>",
link:function(scope,element,attribute){ // never add the $ sign for the scope inside the link function
                                           because it is just a parameter here not dependency injection
console.log(arguments);
element.click(function(){
alert('click');
}
}


};

});
How to pass the information to directive is through attributes
In the above instead of template we can use the templateUrl,
but we keep the html code in seperate file and and give that file name for templateUrl.

Note: we want to bind dom elements we use the link function, jquery as a element

so we can pass the data in 3 ways, inside the scope in a directive.

data:"@"----> for string
data:"="----> for object
data:"&"----> for run the function