Angular JS Interview Question Set 8

Categories: Angular JS

Define $rootScope in AngularJS application.

$rootScope refers to the scope object created on the DOM element containing the ng-app directive meant for bootstrapping the AngularJS application. This object is available across the whole AngularJS application. There can be only one $rootScope object in the entire application. All other scope objects are known as the child scopes of that $rootScope object.

Differentiate between ng-if and ng-show directives.

The ng-if directive does not render the DOM element portion if the condition specified is not satisfied. Here, the scope of the element would be destroyed if that is not rendered.

ng-show directive on the other hand renders the DOM element but hides the display (applying the ng-hide class on that DOM element) if the condition specified within it is not satisfied,

Why is $watch used?

$watch is used for keeping track of the old and new values of the expression or the model variable that is being watched. One such usage is as shown below:

$scope.$watch("trackedVariable", 

   function (newValue, oldValue){

       console.log("Value Changed : ", newValue);

   });

What is scope hierarchy?

Every application developed in AngularJS has one $rootScope object and many child $scope objects. Whenever a new scope is created, that is added to the parent scope. This results in the creation of a hierarchical structure like the DOM structure.

What is an AngularJS module?

An AngularJS module is nothing but a container for maintaining different components of the AngularJS application such as controller, filters, directives, services, etc, and a place where dependencies between them are defined. It can be treated like a main() method of Java. AngularJS module can be created by making use of the module() method of the angular object.

For example, in the below code, you are defining an app module for the myFirstApp application. You can define all the dependencies, if any, to this module within the square brackets.

var app = angular.module('myFirstApp', []);

List out the scope characteristics in AngularJS?

Scope object has 5 important characteristics.

1. It provides the application with a context against which the AngularJS expressions are evaluated.
2. It provides an option to observe the model changes within them using the $watch watcher service.
3. The scope objects provide APIs like $apply that help in propagating the model changes throughout the application into the view from the sources like controllers, services, or various AngularJS event handlers.

How is the mouse double click event accomplished?

To specify any custom behaviour upon double click event on any HTML element, AngularJS makes use of the ng-dblclick directive. It is to be noted that the ng-dblclick does not override the JavaScript’s ondblclick event. Example usage of this directive:

<button ng-dblclick="clicked = clicked + 1" ng-init="clicked=0">

 Double Click Here

</button>

How can you reset a $timeout and disable a $watch()?

In order to reset $timeout, we call the .cancel() method on it. as shown below:

var myTimer = $timeout(function() { /* your code */ }, 1000);

$timeout.cancel(myTimer);

To disable $watch, we can just call it as shown below:

var deregisterWatch = $scope.$watch(function() { /* Your code */ });

deregisterWatch(); // calling the watcher disables it.

Why is the findIndex() method used? What does it return in case the value is not found?

findIndex() method returns the position of the element in any object. In case the element is not found then the method returns -1.

For example:

var index = $scope.objectsList.findIndex(obj => obj.date =='2021-21-06');

Is it possible for a parent controller to access the methods and properties of the child controller?

No, the parent controller can’t access the properties and the methods of the child controller. But the child controller can access the parent’s methods.

 What can you tell about the given piece of code?

<select ng-options="employee.name for employee in employeeList">

</select>

The given piece of code would throw syntax error because in AngularJS it is not possible to use ng-options directives without using the ng-model directive. The ng-options dynamically generate the <option> elements for the given <select> element by evaluating the expression within it. Now upon selecting the element from the dropdown, the option value needs to be bound to a model which is defined by the ng-model directive. Absence of the ng-model results in error.

 What is the importance of track by in the ng-repeat directive?

ng-repeat directive helps to keep track of all DOM elements dynamically to minimize DOM creation and rendering. It is achieved by storing the instances of the object whenever a new element gets added to the list or collection. AngularJS just renders the newly added element instead of re-rendering the overall collection. This helps in rendering the elements faster.