Angularjs Interview Questions and Answers Set 7

61.What are the attributes can be used during creation of a new AngularJS Directives?

The following attributes can be used during creation of a new AngularJS Directives,

Restrict

The restrict attribute is how AngularJS triggers the directive inside a template. The default value of the restrict option is “A”. The value of “A” causes the directives to be triggered on the attribute name. Other than “A”, restrict option has “E” (only match element name), “C” (only match class name) and “M” (only match the comment name) or any combination among four options.

TemplateUrl

The templateUrl attribute tells the AngularJS HTML compiler to replace custom directive inside a template with HTML content located inside a separate file. The link-Menu (say, our custom directive name) attribute will be replaced with the content of our original menu template file.

Template

Specify an inline template as a string. Not used if you’re specifying your template as a URL.

Replace

If true, replace the current element. If false or unspecified, append this directive to the current element.

Transclude

Lets you move the original children of a directive to a location inside the new template.

Scope

Create a new scope for this directive rather than inheriting the parent scope.

62.What are different type or classification of directives?

AngularJS directives can be classified in 4 different types:-

Element directives:

<ng-directive></ng-directive>

Attribute directives:

<span ng-directive></span>

CSS class directives:

<span class=”ng-directive: expression;”></span>

Comment directives:

<!– directive: ng-directive expression –>

63.How to define multiple restrict options on a directive in AngularJS?

We can specify multiple restrict options for supporting more than one method. All methods should specify restrict keyword like below –    restrict: ‘TA’

64.What is the name of directive is used to bootstrap an angular app?

ng-app directive is used to auto-bootstrap an AngularJS application. The ng-app directive defines the root element of the application and is typically present in the root element of the page.

E.g: on the <body> or <html> tags.

65.In how many different ways, you can define a directive and what is the best practice?

Angular generally prefers camelCase for directives. But since HTML is not case-sensitive so it refers to directive in DOM in lowercase form, delimited by dash (eg. ng-app). But when Angular complies then it normalize the directives.

Below are example of valid directive declaration:-

ng-model

ngModel

ng:model

ng_model

data-ng-model

x-ng-model

66.Mention some angularJS directives and their purpose?

The beauty of AngularJS directives is that they are self explainatory. By just looking at directive name, you will get the idea about purpose and use of directive. Below are some mostly used 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

Keyboard event listeners

ng-keydown

ng-keyup

ng-keypress

ng-change

67.What are the ways to track the error in AngularJS?

Below are the ways to track the error in AngularJS –

$error – This will state the exact error.

$dirty – This will indicate if the value is being changed.

$invalid – This will indicate in case the value entered is wrong or invalid.

68.Explain filters in AngularJS?

Filters are mainly used to format the data before displaying it in the screen to the user. This can be used in services, controllers, directives and templates.

Eg: Syntax of the filter

{{ expression | filter}}

<script type=”text/javascript”>

{ { 25 | currency } } //returns $25.00

</script>

69.What Are Filters? Explain Different Filters Provided By AngularJS?

An AngularJS Filter changes or transforms the data before passing it to the view. These Filters work in combination with AngularJS expressions or directives. AngularJS uses pipe character (“|”) to add filters to the expressions or directives. For example:

<p> {{ bid | currency }} </p>

The above example is an expression enclosed in the curly braces. The filter used in this expression is currency. Also important to note that filters are case-sensitive.

AngularJS provides following filters to transform data.

currency – It is used to format a number to a currency format.

date – It is required to format a date to a specified format.

filter – It chooses a subset of items from an array.

json – It formats an object to a JSON string.

limitTo – Its purpose is to create an array or string containing a specified number of elements/characters. The elements are selected, either from the beginning or the end of the source array or string. This depends on the value and sign (positive or negative) of the limit.

lowercase – This filter converts a string to lower case.

number – It formats a number as a text.

orderBy – It enables to sort an array. By default, sorting of strings happens alphabetically. And sorting of numbers is done numerically. It also supports a comparator function where we can define what will be counted as a match or not.

uppercase – This filter converts a string to upper case.

70.Explain what is string interpolation in angular.js ?

In angular.js the compiler during the compilation process matches text and attributes using interpolate service to see if they contain embedded expressions. As part of normal digest cycle these expressions are updated and registered as watches.