1. Home
2. All Blogs
3. Angular JS - Scopes - Interview questions

Angular JS - Scopes - Interview questions

Angular JS is javascript framework designed to extend HTML syntax to build rich internet application. Angular JS provides methods to enhance HTML.

To bind HTML and Javascript , Angular JS provides Scopes object. HTML is knows as View and Javascript is knows as Controller and Scopes object is used as binding part between View and Controller.

Following are some basic Interview questions based on Angular JS Scopes object to help you prepare for Angular JS Interview

Q. 1 What is Scope ?

The Scope is an object that is specified as a binding part between the HTML (view) and the JavaScript (controller). It plays a role of joining controller with the views. It is available for both the view and the controller.

Q. 2 Define function scope in AngularJS .

Scope refers to the application model. It acts like a glue between the application controller and the view. Scopes are arranged in a hierarchical structure and impersonate the DOM (Document Object Model) structure of the application. It can watch expressions and propagate events.

Q. 3 What is the hierarchy? How many scopes can an application have?

Each Angular application contains one root scope, but there can be several child scopes. The application may have multiple scopes because child controllers and some directives create new child scopes. When the new scope is formed or created, it is added as a child of the parent scope. As similar to DOM, scopes also create a hierarchical structure.

Q. 4 What is $scope?

A $scope is an object that represents the application model for an Angular application.
Each AngularJS application can have only one root scope but can have multiple child scopes.

Q. 5 What are the characteristics of $scope .

characteristics of the $scope object are given below:

• It provides observers to check for all the model changes.
• It provides the ability to propagate model changes through the application as well as outside the system to other associated components
• Scopes can be nested in a way that they can isolate functionality and model properties.
• It provides an execution environment in which expressions are evaluated.

Q. 6 Define $rootScope in AngularJS.

Every AngularJS application contains a $rootScope, which is the top-most scope created on the DOM element. An application can contain only one $rootScope, which will be shared among all its components. Every other scope is considered as its child scope. It can watch expressions and propagate events. By using the root scope, one can set the value in one controller and read it from the other controller.

Q. 7 What is the main purpose of $routeProvider in AngularJS?

$routeProvider is one of the important services which set the configuration of URLs. It further maps them with the corresponding HTML pages or ng-templates and attaches a controller with the same.

Q. 8 Define $watch?

In angularJS, $watch() function is used to watch the changes of variable in $scope object. Generally, the $watch() function is created internally to handle variable changes in the application.If there is a need to create custom watch for some specific action then it's better to use $scope.watch function. The $scope.watch() function is used to create a watch of some variable. When we register a watch, we pass two functions as parameters to the $watch() function:

• A value function
• A listener function

Q. 9 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);
});

Q. 10 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.

Q. 11 What are the different phases of the lifecycle of AngularJS Scope?

The following are phases of the scope lifecycle in AngularJS:

1. Creation: In this phase, the rootScope is created by $injector during the application bootstrap. During the phase of template linking, new child scopes relevant to the directives are created.
2. Watcher registration: Here, the directives register the watches on the scope object which will be used to propagate values of models to DOM.
3. Model mutation: The model mutations need to be present within the scope.$apply() for them to be properly observed. These will be done implicitly by AngularJS when working on synchronous or asynchronous work requests.
4. Mutation observation: Once the $apply is complete, the digest cycle starts to observe for any model mutations on the scopes. Here, the $watches expressions are monitored for the model mutations and if any mutations are observed, then the $watch listener is called on the model.
5. Scope destruction: As and when the child scopes are unnecessary, the creator of the scopes would have to destroy them by making use of scope.$destroy(). This ensures that the $digest cycle propagations are stopped and the memory once used by the child scopes is reclaimed.

Q. 12 What is the difference between the $ and the $$ prefixes?

The $$ prefix is used to define a private variable in AngularJS. This is responsible for avoiding accidental code changes due to exposure to the variables. Examples are $$observers, $$watchers, $$childScope etc.The $ prefix is used for defining built-in core AngularJS functionalities like variable, parameter, method, or any properties. Examples are $scope, $http, $routeProvider, $watch etc.

Q. 13 What is the importance of the $location service?

$location is one of the built-in AngularJS services that helps to keep track of the application’s URL, parses it, and makes the value available to the controller. In case the $location value is changed in the controller, the same is reflected on the browser’s address bar. Changes to the URL on the address bar also result in reflection of the same on the $location service.

Q. 14 'How are AngularJS prefixes $ and $$ used?

$$ prefix in AngularJS is used as a private variable, as it is responsible for preventing accedental code collision with the user code.Whereas, $ prefix is used to define angular core functionalities such as variable, parameter, property or method, etc.