Saturday, January 9, 2016

AngularJS Directives

A directive is really a way to teach HTML new tricks.It allows us to extend HTML very easily by simply adding attributes, elements or comments.

Angular Directives can be written in 4 ways.
1. As a tag e.g . <ng-form />

2. As a attribute of a tag e.g. <div ng-form />

3. As a class e.g. <div class=”ng-form”/>

4. As a html comment
Note: All the directives cannot be written in all 4 ways, refer angular documentation for more details.

To support older versions of IE avoid using Tag forms, instead use attribute form or class form of angular directives.
1. ngApp

Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the <body> or <html> tags.


Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.

Also if you want to know more about how to overcome this limitation then go through below link

2. AngularJS Expressions:   
AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.
Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}

 3. ng-bind
This attribute is used to bind value to a element.
We use expression syntax to bind value to html elements (eg. <div>Employee Name : {{ employeedetails.firstname }}</div>).

We can do same using the ng-bind directive.
It replaces text content of the HTML element with the value of a given expression, and updates the text content when the value of that expression changes.

E.g. <div ng-bind="employeedetails.firstname"></div>
Please note here that I haven’t used expression syntax(i.e. {{ }}).

If you are not using ng-bind, instead something like this:

  Hello, {{}}
you might see the actual Hello, {{}} for a second before is resolved (before the data is loaded)
You could do something like this
  Hello, <span ng-bind=""></span>
if that's an issue for you.
Another solution is to use ng-cloak.


The {{}} is much slower.

This ng-bind is a directive and will place a watcher on the passed variable. So the ng-bind will only apply, when the passed value does actually change.

The brackets on the other hand will be dirty checked and refreshed in every $digest, even if it'snot necessary.

 4. ng-bind-template
This attribute is used to bind multiple values to a element.
 It work same as ng-bind except it can bind multiple values to same element which is not possible with ng-bind.

E.g. <div ng-bind-template="{{employeedetails.firstname}} {{employeedetails.lastname}}"></div>
Please note that here I have to use expression syntax (i.e. {{ }})

This directive is needed since some HTML elements (such as TITLE and OPTION) cannot contain SPAN elements.

5. ng-bind-html :  
This attribute is used to bind html string markup to element It replaces the content(innerHTML) of element with the specified binding.
E.g. For <div ng-bind-html="myhtmlsnippet">My Content</div>
Where $scope.myhtmlsnippet = '<b > <i style="color:red;"> This is Demo created by Naren </i> </b>';

The output for above code snipped would be the “My Content” would be replaced with html in myhtmlsnippet variable.
And the rendered html would be as follows:

<div ng-bind-html="myhtmlsnippet" class="ng-binding"><b> <i> This is Demo created by Naren </i> </b></div>

6. ng-cloak 
This attribute is used to avoid displaying of angular expression tags on slower computer untill they are processed by angular engine. It holds rendering of html element until the angular directives are processed by angular engine and bindings are replaced with actual values.
If this is not used then user might get flashesh on slower computers and can see binding expressions until then are replaced with actual values..
Here we need to include some css style for it

E.g. [ng-cloak], [data-ng-cloak], ng-cloak {
display: none;

7. ng-style 

 We can bind a variable which would be containing some valid css object.

E.g. $scope.mystyle = {color:'red'};

<h2 ng-style="mystyle" ng-bind="mytitle"/>
 Define a class in css file. Define some variable on $scope object which will contain name of this class and then assign this class to any required element.

E.g. .myred{ color:'red'; }

<h2 ng-class=" RedClass" ng-bind="mytitle"/>

The directive operates in three different ways, depending on which of three types the expression evaluates to:

1.    If the expression evaluates to a string, the string should be one or more space-delimited class names.

2.    If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name.

3.    If the expression evaluates to an array, each element of the array should either be a string as in type 1 or an object as in type 2. This means that you can mix strings and objects together in an array to give you more control over what CSS classes appear. See the code below for an example of this.
<p ng-class="style">Using String Syntax</p>
<p ng-class="{strike: deleted, bold: important, 'has-error': error}">Map Syntax Example</p>
<p ng-class="[style1, style2, style3]">Using Array Syntax</p>
<p ng-class="[style4, {orange: warning}]">Using Array and Map Syntax</p> & ng-class-odd 

Works similar to ng-class but used in ng-repeat and applies to even or odd elements.

10. ng-show
This attribute is used to Show or Hide element based on value of binded expression. E.g. <div ng-show=" myVisibilityParam "></div>

This div will be shown if value of myVisibilityParam variable evaluates to true else it will be hidden.

11. ng-hide
 This attribute is used to Hide or Show element based on value of binded expression. Hides or shows element based on value of binded expression.

E.g. <div ng-hide=" myVisibilityParam "></div>

This div will be hidden if value of myVisibilityParam variable evaluates to true else it will be shown.

12. ng-repeat
 This attribute is used to repeat some template for collection of values. You can consider this same as foreach loop where you iterate through a collection.

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

Some of Special properties are exposed on the local scope of each template instance and all of these are boolean :  $first, $middle, $last, $even, $odd

No comments:

Post a Comment