Sharing Knowledge is always advisable
What are Directives?
Directives in AngularJS are used simplify DOM manipulation. They can modify the behavior of new and existing DOM elements, by adding custom functionality, like a datepicker or an autocomplete widget. AngularJS comes with its own set of built-in directives, as well as the ability to add your own ones.
Why are directives used in AngularJS?
Standard HTML has elements like <span>, <input>, and <button> that have fixed behavior. To make the <input> element behave like a datepicker, it takes custom CSS and JS calls from your Javascript code. AngularJS makes this easy by allowing you to wrap all this in what we call a directive. So instead of writing
<input id="datepickerElem">
and then calling
$('#datepickerElem').datepicker()
from some random place in your code, you can now instead write, directly in your HTML
<input datepicker>
or
<datepicker>
$('#datepickerElem').datepicker()
from some random place in your code, you can now instead write, directly in your HTML
<input datepicker>
or
<datepicker>
How to use directives in AngularJS?
Using directives in an AngularJS application is easy. You just need to add the directive name in whichever DOM element you want right in your HTML. For example, a datepicker Directive, depending on how it is defined, could be used as
<input datepicker>
or
<datepicker>While declaring an AngularJS directive, the naming convention followed is camelCase. For example, we would define the name of the directive as ‘fundooDatepicker’. But when you actually use the directive in your HTML, it is the dash-separated version. That is, our widget would be ‘<fundoo-datepicker>’ and not ‘<fundooDatepicker>’
AngularJS’ in-built directives
ng-app : Initializes application.
ng-model : Binds HTML controls to application data.
ng-Controller : Attaches a controller class to view.
ng-repeat : Bind repeated data HTML elements. Its like a for loop.
ng-if : Bind HTML elements with condition.
ng-show : Used to show the HTML elements.
ng-hide : Used to hide the HTML elements.
ng-class : Used to assign CSS class.
ng-src : Used to pass the URL image etc.
Event Listeners
ng-click : Click event to bind on HTML elements.
ng-dbl-click
Mouse event listeners
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
Keyboard event listeners
ng-keydown
ng-keyup
ng-keypress
ng-change
ng-keyup
ng-keypress
ng-change
this is not complete list. For complete one go to this link
https://docs.angularjs.org/api/ng/directive
ng-app :
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body ng-app>
<div>
Here is your AJAX-powered text: <span style="color: fuchsia;">{{ txt }}</span>
<p>
Enter message:
<input type="text" ng-model="txt" /></p>
</div>
</body>
</html>
the output will be
HTML document is loaded into the browser, and evaluated by the browser. At this time the AngularJS JavaScript file is loaded, the angular global object is created, and your JavaScript which registers controller functions is executed.
Second, AngularJS scans through the HTML to look for AngularJS apps and views. when it find it the page is now ready.
Now if we remove the ng-app directive from body tag the output will be
ng-repeat :
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
output will be :-
Looping with ng-repeat:
- Jani
- Hege
- Kai
