AngularJS Interview Questions Part - 2
Q 1. What are AngularJS
Directives?
Ans 1. AngularJS directives are used to extend HTML. These are special attributes starting with ng-
prefix.
Q 2. How to use AngularJS
ng-app directive?
Ans 2. This directive is used to auto-bootstrap an AngularJS application . The
ng-app directive designates the root element of the page - e.g. on
the <body> or <html> tags.
Example - <body
ng-app="ngApp">
Q 3. How to use AngularJS
ng-init directive?
Ans 3. ng-init
directive initializes an AngularJS application data. It is used to assign
values to the variables to be used in the application.
Example - <body
ng-app="ngApp" ng-init="CountryCapital_List = [['India',
'Delhi'], ['Bangladesh', 'Dhaka'], ['SriLanka', 'Colombo'], ['USA', 'Washington
D.C.']]">
In the above example the variable CountryCapital_List
is initialized to an array of arrays.
Q 4. How to use AngularJS
ng-model directive?
Ans 4. The ng-model directive
binds an input, select, textarea (or custom form control) to a
property on the model.
Example - <input
type="text" ng-model="Name"/>
Q 5. How to use AngularJS
ng-repeat directive?
Ans 5. This
directive repeats html elements for each item in a collection.
Example – <tr
ng-repeat="Country in CountryCapital_List">
Q 6. What is $watch() in
AngularJS?
Ans 6. When
you create a data binding from somewhere in your view to a variable on the
$scope object, AngularJS creates a "watch" internally. A watch means
that AngularJS watches changes in the variable on the $scope object. The framework is "watching" the variable. Watches are
created using the $scope.$watch() function.
The
$scope.watch() function creates a watch of some variable. When you register a watch you
pass two functions as parameters to the $watch() function:
· A value function
·
A listener function
Example - $scope.$watch(function()
{},
function() {}
);
The first function is the value function and the
second function is the listener function.
The value function should return the value which
is being watched. AngularJS can then check the value returned against the value
the watch function returned the last time. That way AngularJS can determine if
the value has changed. Here is an example:
$.scope.$watch(function(scope) {return scope.data.myVar },
function()
{}
);
This example value function returns the
$scope variable scope.data.myVar. If the value of this variable changes, a
different value will be returned, and AngularJS will call the listener function.
The listener function should do whatever it needs
to do if the value has changed. Perhaps you need to change the content of
another variable, or set the content of an HTML element or something. Here is
an example:
$scope.$watch(function(scope) { return scope.data.myVar },
function(newValue, oldValue) {
document.getElementById(“”).innerHTML
=
“”
+ newValue + “”;
}
);
This example sets the inner HTML of an HTML
element to the new value of the variable.
Q 7. What is $digest in AngularJS?
Ans 7. At
key points in your application AngularJS calls the
$scope.$digest() function. This function iterates through all watches and checks if any
of the watched variables have changed. If a watched variable has changed, a
corresponding listener function is called. The listener function does whatever
work it needs to do, for instance changing an HTML text to reflect the new
value of the watched variable. Thus, the $digest() function is what triggers the data binding to update.
The
$scope.$digest() function iterates through all the
watches in the $scope object, and its child $scope objects
(if it has any). When $digest() iterates over the watches, it calls
the value function for each watch. If the value returned by the value function
is different than the value it returned the last time it was called, the
listener function for that watch is called.
The
$digest() function is called whenever AngularJS
thinks it is necessary. For instance, after a button click handler has been
executed, or after an AJAX call returns (after the done() / fail() callback function has been executed).
You may encounter
some corner cases where AngularJS does not call the
$digest() function for you. You will usually
detect that by noticing that the data bindings do not update the displayed
values. In that case, call $scope.$digest() and it should work.
Q 8. What is $apply in
AngularJS?
Ans 8. The
$scope.$apply() function takes a function as parameter which is executed, and after that $scope.$digest() is called internally. That makes it easier for
you to make sure that all watches are checked, and thus all data bindings
refreshed. Here is an $apply() example:
$scope.$apply(function()
{
$scope.data.myVar = “New value”;
});
The function passed to the
$apply() function as parameter will change the value of $scope.data.myVar. When the function exits AngularJS will call
the $scope.$digest() function so all watches are checked for changes in the watched values.
Q 9. What should be the
maximum number of concurrent “watches”?
Ans 9. To reduce memory
consumption and improve performance it is a good idea to limit the number of
watches on a page to 2,000. A utility called
ng-stats can help track your watch count and digest cycles.
Q 10. What makes the
angular.copy() method so powerful?
Ans 10. It creates a deep copy of the variable. A
deep copy of a variable means it doesn’t point to the same memory reference as
that variable. Usually assigning one variable to another creates a “shallow
copy”, which makes the two variables point to the same memory reference.
Therefore if we change one, the other changes as well.
