Angular JS interview question set 2/Angular JS Interview Questions and Answers for Freshers & Experienced

What is the digest cycle in AngularJS?

Digest cycle is important part of the data binding in AngularJS, which compares the old and new version of the scope model. Digest cycle triggered automatically or manually by using $apply() function.

What is immediately invoked function expressions?

IIFEs or Immediately Invoked Function Expressions is a function that executes as soon as it is created. It offers a simple way to isolate the variable declaration. IIFEs contains two major functions:

1) operator()

2) expression()

What is the difference between ngRoute and ui-router?

ngRoute is a module developed by angularJS team which was a part of the core angularJS framework. Whereas ui-router was developed by a third-party community to overcome the problems of ngRoute.

ngRoute is a location or URL based routing, and ui-router is a state-based routing which allows nested views.

Explain the auto bootstrap process in AngularJS

Angular initializes automatically DOMContentLoaded event or when you download angular.js script is to the browser.

After this, AngularJS find the ng-app directive that is the root of angular app compilation. When ng-app directive is found, AngularJS do the following steps:

1) load the module, which is associated with the directive,

2) Create application injector,

3) Compile the DOM from the ng-app root element. This process is known as auto bootstrapping.

Difference between AngularJS and React.JS.

AngularJS is a TypeScript language-based JS framework released in October 2010 by Google. It is a completely free framework and open source that is used in SPA projects (i.e. Single Page Application projects).

React.JS is a javascript library developed by Facebook in March 2013 for building UI. React components can be used on several pages but not as a SPA (i.e. Single Page Application).

What do you mean by NPM?

NPM stands for Node Package Manager. It consists of a command line tool client for interacting with the repository of Node.js project.

Explain the concept of webpack

Webpack is a module bundler for Angular2 or above. It bundles, transpiles, and minifies AngularJS application.

If both factory and service are equivalent, then when should I use them?

Factory provider is preferred using an object, whereas a service provider is preferred using with class.

Difference between services and factory.

Factories are functions that return the object, while services are constructor functions of the object which is used by a new keyword.


Factory – module.factory(`factoryName`, function);

Service – module.service(`serviceName`, function);

Is AngularJS well-suited with all browsers?

Yes, it is companionable with all browsers like Safari, Chrome, Mozilla, Opera, IE, etc. as well as mobile browsers.

Is Nested Controllers possible or not in AngularJs?

Yes, it is possible as Nested Controllers are well-defined in a classified manner while using a view.

What is the syntax of factory method in AngularJS?

The syntax of Factory is as follows:

app.factory('serviceName',function(){ return serviceObj;})

Explain in detail with a proper example of genuine differences identified specifically between “constructor” and “ngoninit” for the Angular 6 version?

Constructor: Constructor is one of the default declarations for any specific class or object, it can be called every time when any class instantiated, also ensuring initialization properly of their subclasses and different instance variable fields.

Ngonint: It is one of the first initialize methods using by Angular, mention in the first component of an angular life cycle. It mainly indicated that angular has been completed of creating entire require components properly. It is not mandatory to use but the best practice to use.

What is mean by ngzone?

The ngzone is a wrapper for the JavaScript files and denoted by Zone.js. These are the key libraries in which the tracking of asynchronous functions. It helps in creating the context for the functions.

What is typescript in Angular 8?

The working of typescript in Angular 8 is similar with the enabled and disabled flag, which means if you want to test whether the selected value is an object or not, then the following syntax is used " Typeof value = = = 'object' ". In angular 8 the following types of checks are used such as “Typeof value.ngOnDestroy = = = 'function' “.

What are the features of Bazel?

The following are the main features of Bazel:

It is an internal build tool, through which the application can be customized.
It also tests the action and performance of multiple machines.
It constructs a graph through which you can identify useful information.
It also supports customization.runGuardsAndResolvers

What is BOM(Browser Object Model)?

BOM or Browser Object Model consists of history, object navigator, screen location, etc. It specifies the global browser objects like console, local storage, and window.

45) What is the difference between a unit and end-to-end (e2e) test in AngularJS ?

AngularJS provides full support for both the unit and end-to-end testing.

The unit testing is a method that helps the developers validate the isolated pieces of code and end-to-end testing is required when you want to ascertain the set of components integrated together work as you expect.

How can you set, get, and clear cookies in AngularJS?

You can use:

$cookies.put() method to set the cookies.
$cookies.get() method to get the cookies.
$cookies.remove to remove cookies in AngularJS.

What is the difference between a stateful and stateless component in AngularJs ?

A stateful component is a detail implementation of the component that can change over time and the stateful components can have stateless components inside them, while the stateless components are a plain JavaScript function.

How to upgrade from Angular 2 to Angular 4

You only have to update the tsconfig.json and package.json files. Some minor changes may need as per the requirement of the project types.

How to do email and Phone no. validation in AngularJS ?

Angular form validation and ng-pattern directive can be used to validate the email and phone number in Angular JS.

What is AngularJs DOM?

AngularJs have some directives which are used to encapsulate AngularJs application data to a disabled attribute of the HTML elements.

Example: ng-disabled directive encapsulates the application data to the disabled attributes of the HTML DOM element.

<div ng-app="" ng-init="mySwitch=true">
<button ng-disabled="mySwitch">Click Me!</button>
<input type="checkbox" ng-model="mySwitch"/>Button
{{ mySwitch }}

What is Event Handling?

Event handling in AngularJs is very useful when you want to create advance AngularJs applications.

We need to handle DOM events like mouse clicks, moves, keyboard presses, change events and so on. AngularJs has some listener directives like ng-click, ng-dbl-click, ng-mousedown, ng-keydown, ng-keyup etc.

What is a representational state transfer(REST) in AngularJs?

REST is an API style that operates over the HTTP request.

The requested URL identifies the data to be operated on, and the HTTP method identifies the operation that is to be performed. REST is a style of API rather than a formal specification, and there is a lot of debate and disagreement about what is and isn’t RESTful, which is a term used to indicate an API that follows the REST style.

AngularJS is flexible about how RESTful web services are consumed.

How to access parent scope from child controller in AngularJS ?

In angular there is a scope variable called $parent (i.e. $scope.$parent). $parent is used to access parent scope from child controller in Angular JS.

<div ng-controller="ParentCtrl">
<h1>{{ name }}</h1>
<p>{{ address }}</p>
<div ng-controller="ChildCtrl">
<h1>{{ title }}</h1>
<input type="text" ng-model="$parent.address" />

Difference between Angular and Angular JS?

Angular JS is the first version of the Angular. Angular CLI tool is used to generate Angular components. Angular JS is a client-side framework that works with JavaScript, still supported but not compatible with Angular. Angular JS is the old version and Angular is the newest version.

What is ng-non-bindable in AngularJS?

Ng-non-bindable specifies AngularJs to not compile the HTML element and its child nodes. For example:

<title ng-non-bindable > </title>

What is the use of a double-click event in AngularJs?

It allows you to specify the custom behavior on a double click event of the mouse on a web page. We can use it (ng-dblclick) as an attribute of the HTML element like,

<ANY_HTML_ELEMENT ng-dblclick="{expression}">

What is ng-switch in AngularJS?

It is used to conditionally exchange the structure of DOM on a template that is based on a scope-based expression.

This directive lets you show or hide the HTML element depending on the expression.

<element ng-switch="expression">
<element ng-switch-when="value"></element>

How to enable HTML5 mode in Angular 1.x?

html5Mode method of $locationProvider module is used to enable HTML5 mode in Angular 1.x. For creating pretty URLs and removing # from URLs html5Mode need to true.

Enabling html5Mode to true in Angular 1.x.

angular.module('myApp', [])

.config(function($routeProvider, $locationProvider) {

.when('/', {
templateUrl : 'partials/home.html',
controller : mainController

// use the HTML5 History API

What is orderby filter in AngularJS?

Orderby filter in AngularJS orders the array based on specified criteria. Following example states how you can order product by price.

<li ng-repeat = "company in product.products | orderBy:'price">
{{ company.product + ', price:' + product.price }}

How can you integrate AngularJS with HTML?

Developers can follow the following steps to integrate AngularJS with HTML:

Step 1: including AngularJS JavaScript in html page.

<script src = ""></script>

Step 2: Point out AngularJS application.

You have to add ng-app attribute inside HTML body tag to tell what part of HTML AngularJS app has as shown in the following example:

<body ng-app = "testapp">

Who created Angular JS?

AngularJS was developed by Adam Abrons and Misko Hevery. Currently, it is developed by Google.

What is JWT Interceptor?

It is used to intercept Http requests from the application when any users log in to add a JWT in the Authorization header.

What is $rootscope in AngularJS ? How is it different from the scope?

In Angular JS $rootscope and $scope both are an object which is used for sharing data from the controller to view.
The main difference between $rootscope and $scope is that $rootscope is available globally to across all the controllers whereas $scope is available only in controllers that have created it along with its children controllers.

What is dependency injection In AngularJs and how does it work?

AngularJS was designed to highlight the power of dependency injection, a software design pattern that places an emphasis on giving components of their dependencies instead of hardcoding them within the component. For example, if you had a controller that needed to access a list of customers, you would store the actual list of customers in a service that can be injected into the controller instead of hardcoding the list of customers into the code of the controller itself. In AngularJS you can inject values, factories, services, providers, and constants.

Explain how does AngularJS implement two-way binding?

Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change and vice versa.

Explain ng-bind-template and ng-non-bindable.

ng-bind-template: It replaces the text content of the element by interpolation of the template. It can contain multiple double curly markups.

<ANY ELEMENT ng-bind-template= " {{expression1}} {{expression2}} … {{expression n}} "> </ANY ELEMENT>
Ng-non-bindable: It specifies AngularJS to not compile the content of this HTML element and its child nodes.

<ANY ELEMENT ng-non-bindable > </ANY ELEMENT>

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,

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.


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.


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


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


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


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


Create a controller which publishes an API for communicating across directives.


Require that another directive be present for this directive to function correctly.


Programmatically modify resulting DOM element instances, add event listeners, and set up data binding.


Programmatically modify the DOM template for features across copies of a directive, as when used in other directives. Your compile function can also return link functions to modify the resulting element instances.

Explain the concept of scope hierarchy

Each angular application consists of one root scope but may have several child scopes. As child controllers and some directives create new child scopes, an application can have multiple scopes. When new scopes are formed or created, they are added as a children of their parent scope. They also create a hierarchical structure similar to DOM.

What is SPA (Single Page Application) in AngularJS?

It is a web application that loads a single HTML page and dynamically updates the page as the user connects with the app.

By using AJAX and HTML a fluid and responsive web app can be created by SPA without invariant page reloads. Through this, we can make responsive UI with no page flicker.

How can we show that a scope variable should have one-time binding only?

To show one-time binding we have to use “::” in front of the scope.

Where can we implement the DOM manipulation in AngularJS?

Manipulation of DOM is in directives and apart from this it should not exist in the controller’s services or anywhere else.

What is DI (Dependency Injection) and how an object or function can get a hold of its dependencies?

DI or Dependency Injection is a software design pattern that deals with how code gets hold of its dependencies. In order to retrieve elements of the application which is required to be configured when the module gets loaded, the operation "config" uses dependency injection.

These are the ways that object uses to hold of its dependencies

1. Typically using the new operator, dependency can be created
2. By referring to a global variable, dependency can be looked up
3. Dependency can be passed into where it is required

What are the characteristics of "Scope"?

a) To observer model mutations scopes provide APIs ($watch)
b) To propagate any model changes through the system into the view from outside of the Angular realm
c) A scope inherits properties from its parent scope, while providing access to shared model properties, scopes can be nested to isolate application components
d) Scope provides context against which expressions are evaluated

What is the difference between one-way binding and two-way binding in AngularJS ?

In One-Way data binding, view (UI part) not updates automatically when data model changed. We need to write custom code to make it updated every time.
ng-bind has one-way data binding.

While in two way binding scope variable will change it’s value every time its data model changed is assigned to a different value.

How to isolate a directive’s Scope in AngularJS ?

You can isolate a directive’s Scope by passing an object to the scope option of directive.
This tells the directive to keep scope inside of itself and not to inherit or share with other scopes.

What is use of CanActivate?

CanActivate is the feature in Angular Interface that is focused on the security. It helps the user to login for any application during the routing of a page.

What is Lazy Loading?

It is well known method that is used for loading the JavaScript components asynchronously while a particular routing feature is activated.

R4R Team
R4R provides Angular JS Freshers questions and answers (Angular JS Interview Questions and Answers) .The questions on website is done by expert team! Mock Tests and Practice Papers for prepare yourself.. Mock Tests, Practice Papers,Angular JS interview question set 2,Angular JS Freshers & Experienced Interview Questions and Answers,Angular JS Objetive choice questions and answers,Angular JS Multiple choice questions and answers,Angular JS objective, Angular JS questions , Angular JS answers,Angular JS MCQs questions and answers Java, C ,C++, ASP, C# ,Struts ,Questions & Answer, Struts2, Ajax, Hibernate, Swing ,JSP , Servlet, J2EE ,Core Java ,Stping, VC++, HTML, DHTML, JAVASCRIPT, VB ,CSS, interview ,questions, and answers, for,experienced, and fresher R4r provides Python,General knowledge(GK),Computer,PHP,SQL,Java,JSP,Android,CSS,Hibernate,Servlets,Spring etc Interview tips for Freshers and Experienced for Angular JS fresher interview questions ,Angular JS Experienced interview questions,Angular JS fresher interview questions and answers ,Angular JS Experienced interview questions and answers,tricky Angular JS queries for interview pdf,complex Angular JS for practice with answers,Angular JS for practice with answers You can search job and get offer latters by studing .learn in easy ways .