Top 61 AngularJS Interview Questions And Answers

Question 1

Why to use AngularJS?

Accepted Answer

There are following reasons to choose AngularJS as a web development framework:

1. It is based on MVC pattern which helps you to organize your web apps or web application properly.
2. It extends HTML by attaching directives to your HTML markup with new attributes or tags and expressions
in order to define very powerful templates.
3. It also allows you to create your own directives, making reusable components that fill your needs and
abstract your DOM manipulation logic.
4. It supports two-way data binding i.e. connects your HTML (views) to your JavaScript objects (models)
seamlessly. In this way any change in model will update the view and vice versa without any DOM
manipulation or event handling.
5. It encapsulates the behavior of your application in controllers which are instantiated with the help of
dependency injection.
6. It supports services that can be injected into your controllers to use some utility code to fullfil your need.
For example, it provides $http service to communicate with REST service.
7. It supports dependency injection which helps you to test your angular app code very easily.
8. Also, AngularJS is mature community to help you. It has widely support over the internet.

Question 2

What is the difference between `ng-show`/`ng-hide` and `ng-if` directives?

Accepted Answer

`ng-show`/`ng-hide` will always insert the DOM element, but will display/hide it based on the condition. `ng-if` will not insert the DOM element until the condition is not fulfilled.

`ng-if` is better when we needed the DOM to be loaded conditionally, as it will help load page bit faster compared to `ng-show`/`ng-hide`.

We only need to keep in mind what the difference between these directives is, so deciding which one to use totally depends on the task requirements.

Question 3

When dependent modules of a module are loaded?

Accepted Answer

A module might have dependencies on other modules. The dependent modules are loaded by angular
before the requiring module is loaded.

In other words the configuration blocks of the dependent modules execute before the configuration blocks of the requiring module. The same is true for the run blocks. Each module can only be loaded once, even if multiple other modules require it.

Question 4

What is the difference between _one-way binding_ and _two-way binding_?

Accepted Answer

* One way binding implies that the scope variable in the html will be set to the first value its model is bound to (i.e. assigned to)  
* Two way binding implies that the scope variable will change it’s value everytime its model is assigned to a different value

Question 5

How would you specify that a scope variable should have one-time binding only?

Accepted Answer

By using “`::`” in front of it.

Question 6

What are _Directives_?

Accepted Answer

**Directives** are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

Angular comes with a set of these directives built-in, like `ngBind`, `ngModel`, and `ngClass`. Much like you create controllers and services, you can create your own directives for Angular to use. When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.

Question 7

Explain what is services in AngularJS

Accepted Answer

In AngularJS *services* are the singleton objects or functions that are used for carrying out specific tasks.  It holds some business logic and these function can be called as controllers, directive, filters and so on.

Question 8

Explain what is directive and mention what are the different types of Directive?

Accepted Answer

During compilation process when specific HTML constructs are encountered a behaviour or function is triggered, this function is referred as *directive*.  It is executed when the compiler encounters it in the DOM.

Different types of directives are:

* Element directives
* Attribute directives
* CSS class directives
* Comment directives

Question 9

Does AngularJS has dependency on jQuery?

Accepted Answer

AngularJS has no dependency on jQuery library. But it can be used with jQuery library.

Question 10

What directive would you use to hide elements from the HTML DOM by removing them from that DOM not changing their styling?

Accepted Answer

The `ngIf` Directive, when applied to an element, will remove that element from the DOM if it’s condition is false.

Top 61 AngularJS Interview Questions

Why to use AngularJS?

What is the difference between ng-show/ng-hide and ng-if directives?

What are Filters in AngularJS?

Explain what is services in AngularJS

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

Does AngularJS has dependency on jQuery?

What is auto bootstrap process in AngularJS?

What are the advantage of AngularJS?

What is scope in AngularJS?

What is scope hierarchy?

Explain what is directive and mention what are the different types of Directive?

What is a singleton pattern and where we can find it in AngularJS?

What are Directives in AngularJS?

What are the AngularJS features?

What are the basic steps to unit test an AngularJS filter?

How do you share data between controllers?

Explain what is a $scope in AngularJS?

What are Directives?

When dependent modules of a module are loaded?

What are Angular’s prefixes $ and $$?

How would you specify that a scope variable should have one-time binding only?

Explain what Angular JS routes does?

What should be the maximum number of concurrent watches?

Explain what is Angular Expression? Explain what is key difference between angular expressions and JavaScript expressions?

Where should we implement the DOM manipulation in AngularJS?

How do you reset a $timeout, $interval(), and disable a $watch()?

If you were to migrate from Angular 1.4 to Angular 1.5, what is the main thing that would need refactoring?

Is it a good or bad practice to use AngularJS together with jQuery?

Explain what is the difference between link and compile in AngularJS?

What is a digest cycle in AngularJS?

What are different ways to invoke a directive?

What is manual bootstrap process in AngularJS?

What is the role of ng-app, ng-init and ng-model directives?

What is restrict option in directive?

What is an interceptor? What are common uses of it?

What is the role of services in AngularJS and name any services made available by default?

How to access jQLite?

What is jQLite/jQuery Lite?

Explain how $scope.$apply() works?

Can you define multiple restrict options on a directive?

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

Explain what is injector?

What is the difference between $scope and scope?

What is DDO (Directive Definition Object)?

How AngularJS is compiled?

What is $scope and $rootScope?

When should you use an attribute versus an element?

What makes the angular.copy() method so powerful?

Explain what is linking function and type of linking function?

How Directives are compiled?

How AngularJS compilation is different from other JavaScript frameworks?

What are Compile, Pre and Post linking in AngularJS?

How would you programatically change or adapt the template of a directive before it is executed and transformed?

How do you hide an HTML element via a button click in AngularJS?

How do you disable a button depending on a checkbox’s state?

What directive would you use to hide elements from the HTML DOM by removing them from that DOM not changing their styling?

How would you make an Angular service return a promise?

How would you validate a text input field for a twitter username, including the @ symbol?

How would you react on model changes to trigger some further action?

How would you implement application-wide exception handling in your Angular app?

When creating a directive, it can be used in several different ways in the view. Which ways for using a directive do you know? How do you define the way your directive will be used?

What is the difference between `ng-show`/`ng-hide` and `ng-if` directives?

Explain what is a `$scope` in AngularJS?

What are Angular’s prefixes `$` and `$$`?

How do you reset a `$timeout`, `$interval()`, and disable a `$watch()`?

What is the role of `ng-app`, `ng-init` and `ng-model` directives?

Explain how `$scope.$apply()` works?

What is the difference between `$scope` and `scope`?

What is `$scope` and `$rootScope`?

What makes the `angular.copy()` method so powerful?

How would you validate a text input field for a twitter username, including the `@` symbol?