Top 45 AngularJS Interview Questions with Answers

1. What is AngularJS and its key features?#

AngularJS is a JavaScript framework for building large-scale, single page web applications. With AngularJS, you can use HTML as a template language and extend HTML’s syntax to express application components.

AngularJS is known for writing client-side applications with JavaScript and an MVC model, creating cross-browser compliant applications, and being easy to maintain.

The key features of AngularJS are:

2. What are scopes in AngularJS?#

Scopes are like the glue between controller and view. Scopes are objects that refer to the application’s model. They are arranged in a hierarchical structure and mimic the DOM structure.

$scope is a built-in object with application data and methods. You create properties of a $scope object inside a controller function.

3. What are services in AngularJS?#

In AngularJS, services are the singleton objects or functions that carry out tasks. They are wired together with dependency injection (DI) and can be used to organize or share code across an app.

AngularJS comes with many built-in services, like $https: service for making XMLHttpRequests. Most AngularJS develops make their own services.

4. Explain the key difference between AngularJS expressions and JavaScript expressions.#

Just like JavaScript, AngularJS expressions are code snippets placed in binding like {{ expression }}. Their most notable differences are:

• In AngularJS, expressions are evaluated against a scope object (see #2).
• In JavaScript, expressions are evaluated against the global window.
• In AngularJS, expression evaluation is forgiving to null and undefined.
• In JavaScript, any undefined properties will return an error
• In AngularJS, loops and conditionals cannot be added to an expression

5. What are directives in AngularJS?#

Directives are markers on DOM elements that attach new behavior to it. We can use them to creative custom HTML tags that work like custom widgets. Directives are arguably the most important component of an AngularJS application.

The most common, build-in directives are:

• ng-model
• ng-repeat
• ng-App
• ng-show
• ng-bind

6. What is data binding in AngularJS?#

In AngularJS, data binding in is the automatic data synchronization between the model and view components. The ng-model directive is used for data binding.

This allows you to treat the model as the single-source-of-truth, since the view serves as a projection of the model at any given time. This way, the controller and view are totally separate, which improves testing as you can test your controller in isolation.

7. What is interpolation? Why use it in AngularJS?#

Interpolation markup with embedded expressions provides data binding to text nodes and attribute values. During the compilation process, the compiler will match text and attributes.

AngularJS uses an $interpolate service to check if they contain any interpolation markup with embedded expressions, which are then updated and registered as watches.

8. What is factory in AngularJS?#

A factory is a simple function that allows us to add logic to an object and return that object. The factory can also be used to create a reusable function. When using factory, it will always return a new instance for that object, which can be integrated with other components like filter or directive.

9. What are the characteristics of Scope?#

Scope has five main characteristics:

• Scope provides context that expressions are evaluated against
• To observe model mutations scopes using $watch
• Scopes provide APIs using $apply that will propagate model changes through the system into the view from outside of the realm of controllers, services, or AngularJS event handlers
• Scope inherits properties from its parent and provides access to shared model properties
• Scopes can be nested to isolate components

Want more free content? Scroll down to sign up for our free, bi-monthly newsletter.

10. What is dependency injection?#

Dependency Injection (DI) is a software design pattern that addresses how components their dependencies. This relieves a component from finding a dependency and makes them more configurable, reusable, and testable.

DI is pervasive throughout AngularJS, and it can be used either when providing run/config blocks or when defining individual components.

AngularJS provides has an excellent Dependency Injection functionality using the following components:

• Provider
• Value
• Factory
• Constant
• Service

11. How do you integrate AngularJS with HTML?#

1. Include AngularJS JavaScript in the HTML page.

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

2. Add the ng-app attribute into the HTML body tag.

// example 
<body ng-app = "testapp">
</body>

12. Why do we use double click in AngularJS?#

The ngDblclick directive makes it possible to specify custom behavior on any dblclick event. This directive gives AngularJS an action when an HTML element is double-clicked. The ngDblclick directive does not override an element’s ondblclick event.

// example
<button ng-dblclick="count = count + 1" ng-init="count=0">
  Increment (on double click)
</button>
count: {{count}}

13. How do you reset a $timeout and disable a $watch()?#

You must assign the function’s result to a variable. To resent $timeout or $interval(), we use .cancel().

var customTimeout = $timeout(function () {

}, 55);

$timeout.cancel(customTimeout);

To disable $watch, we call it.

14. What is the digest phase?#

The digest cycle is crucial for data binding. It essentially compares an old and a new version of the same scope model. The digest cycle can triggered automatically or manually with $apply().

With every digest cycle, every scope model is compared against their previous values. When a change is found, the watches of that model are fired, and another digest cycle is initiated until it is stable.

This is not needed if we only use core directives. If there are any external changes to the code, the digest cycle needs to be called manually.

15. What is $rootScope and how does it relate to $scope?#

$rootScope is a scope created on the DOM element that contains the ng-app directive. It is available throughout the entire application. An AngularJS application can only have one $rootScope. Other scopes are the child scope.

16. What is scope hierarchy in AngularJS?#

Each AngularJS application has one root scope and many child scopes. When a new scope is created, it is added as a child of its parent. This will implement a hierarchical structure like the DOM.

$rootScope

• $scope for myController 1
• $scope for myController 2

17. How can you make an ajax call using AngularJS?#

AngularJS uses the $https: to make ajax calls. The server will make a database call to get records. AngularJS uses the JSON format for data.

function employeeController($scope,$https:) {
   var url = "tasks.txt";
   $https.get(url).success( function(response) {
      $scope.employee = response; 
   });
}

18. What are some common Angular Global API functions?#

The following four Global API functions are commonly used in AgularJS:

• Angular.isNumber: returns true if the reference is a numeric value
• Angular.isString: return true if the reference is a string type
• Angular.lowercase: converts a string to lowercase letters
• Angular.uppercase: converts a string to uppercase letters

19. How do you hide an HTML tag?#

You can use the ngHide directive to reveal or hide an HTML element that is provided to the attribute. By removing or adding the .ng-hide CSS class onto the element, the HTML element is hidden or revealed. The .ng-hide CSS class is predefined.

The .ng-hide class will style an element with display: none !important by default. This can be overwritten with the .ng-hide CSS class.

20. Name and describe different phases of the AngularJS Scope lifecycle.#

The phases of AngularJS Scope lifecycle are as follows:

• Creation: The root scope is created during the application.
• Model mutation: Directives register watches on the scope that propagate model values to the DOM.
• Watcher registration: Mutations should only be made only within the scope.$apply(). This is done implicitly by AngularJS.
• Mutation observation: After $apply, the $digest cycle starts on the root scope, during which $watched expressions are checked for any model mutation.
• Scope destruction: The scope creator will destroy unnecessary child scopes using the scope.$destroy() API. Memory used by the child scopes are then reclaimed by the garbage collector.

21. How do you create nested controllers in AngularJS?#

In AngularJS, it is possible to create nested controllers. Nesting controllers will chains the $scope, and it changes the same $scope variable in the parent controller as well.

<div ng-controller="MainCtrl">
 <p>{{msg}} {{name}}!</p>
<div ng-controller="SubCtrl1">
<p>Hi {{name}}!</p>
   <div ng-controller="SubCtrl2">
     <p>{{msg}} {{name}}! Your name is {{name}}.</p>
   </div>
</div>
</div>

22. Explain the differences between Angular and jQuery. Which do you use for certain cases?#

jQuery is a library for DOM manipulation. jQuery functions best for the following uses:

• HTML and DOM manipulation
• Event Handling
• CSS manipulation
• Animation control
• Ajax/JSON support

AngularJS is a JavaScript framework. It is best for the following use cases:

• Directives as an extension to HTML
• Web application development
• Dependency Injection
• Unit Testing
• MVC Framework support
• Two way data binding
• RESTful API support

AngularJS is considered more difficult to understand, while jQuery is considered easier to understand than AngularJS. AngularJS supports two-way binding process, and jQuery does not. AngularJS also provides support for deep linking routing, and jQuery does not.

23. Which hooks are available in AngularJS? What are their use cases?#

An AngularJS component can implement lifecycle hooks, which are methods to be called during a component’s life. The following are hook methods can be implemented in AngularJS.

• $onInit()
• $onChanges(changesObj)
• $doCheck()
• $onDestroy()
• $postLink()

24. What are pipes in AngularJS?#

Pipes provide a simple method for transforming data. They are simple functions useable in template expressions. They take an inputted value and return a transformed one. Pipes work by converting data into the specified format. AngularJS it provides built-in pipes, or they can be created by the developer.

To make a pipe, we use the pipe character (|) followed by a filter within a template expression.

<p>Their full name is {{ lastName | uppercase }}</p>

25. What are isolated unit tests?#

In AngularJS, an isolated unit test involves checking the instance of a class without using injected values. Unit testing means we are testing individual units of code. To do software testing correctly, we must isolate the unit that we want to test. This avoids other complications, like making XHR calls to fetch the data.

26. What is Angular CLI? What are its uses?#

Angular CLI is also called the command line interface tool for AngularJS. It can be used to build, initialize, or maintain Angular apps. It offers interactive UI like command shell. Angular CLI drastically speeds up development time.

It is great for quickly building ng2 apps. It is not recommended for new AngularJS developers who want to understand what is going on underneath the hood.

27 How does the angular.Module work?#

The angular.Module is a global place for creating and registering modules. Any modules available to an AngularJS application must be registered with angular.Module.

Passing one argument will retrieve an angular.Module. Passing more than one argument creates a new angular.Module.

28. What are some ways to improve performance in an AngularJS app?#

There are two methods that are officially recommended for production: enabling strict DI mode and disabling debug data.

Enabling strict DI mode can be achieved by being set as a directive, like so:

<html ng-app=“myApp” ng-strict-di>

Disabling debug data can be achieved with the $compileProvider, like so:

myApp.config(function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
});

Some other popular enhancements to performance are:

• Using one-time binding (when possible)
• Making $httpProvider use applyAsync

29. What is the difference between an Angular Component and a Directive?#

An AngularJS component is a directive that makes it possible to use the web component functionality throughout an application. With a component, you can divide your application into smaller components. The role of components is to:

• Declare new HTML via a templateUrl or template
• Create components as part of a component architecture
• Bind view logic to HTML
• Define pipes

An AngularJS directive is a technique we use to attach behavior to an element. This aids with reusability of your components. The role of directives is to:

• Add behavior or extend the existing DOM
• Add existing behavior to an element

30. When a scope is terminated, two destroy events are fired. What are they used for?#

The first event is an AngularJS event called $destroy. This can be used by AngularJS scopes.

The second event is a jqLite/jQuery event. This event is called when a node is removed.

15 more questions to explore#

How to prepare for your interview#

Congrats! You’ve made it to the end. Preparing for your AngularJS interview will take time, so be patient with the process. The best way to continue learning is:

• Read and understand the official AngularJS Developer Guide
• Investigate performance issues and learn how to articulate solutions
• Get hands-on practice with questions
• Brush up on your front end interview skills, including HTML and JavaScript

To get more practice with problems you might encounter in the front end interview, check out Educative’s course Grokking Coding Interview Patterns in JavaScript. This course will teach you the 24 patterns behind every coding interview question using JavaScript, so you can be prepared to answer any problem you might face.

Happy learning!

Continue reading about front end coding interviews#

• 5 tried and true techniques to prepare for a coding interview
• Angular vs Vue vs React: choosing the best framework in 2021
• 15 JavaScript Tips: best practices to simplify your code