50 Interview Questions and Answers on AngularJS

Q1. What is Angular.js?

A JavaScript-based open-source front-end web application framework we can use to create dynamic web applications. This extends HTML with additional features and provides a framework to build single-page applications (SPAs).

Q2. What are the key features of Angular.js

• Two-way data binding
• Dependency injection
• Directives
• Templates
• MVC (Model-View-Controller) architecture
• Testing support
• Routing
• Form validation
• Filters
• Animation support

Q3. How can you differentiate AngularJS and Angular?

AngularJS refers to the version 1.x of the framework. Whereas Angular refers to versions of 2.0 and above. Angular is a complete rewrite of AngularJS along with significant changes, that includes a modular and component-based architecture.

Q4. What is data binding and how does it work in Angular.js?

Data binding in Angular.js enables automatic synchronization of data between the model (JavaScript variables) and the view (HTML). Two-way data binding allows us to make changes in the model to automatically update the view, and vice versa.

Q5. Explain the concept of directives in Angular.js.

Directives are markers on DOM elements that will extend the HTML’s functionality. They allow us to create customized reusable components, manipulate the DOM, and attach behaviors to elements.

Q6. How do filters work in Angular.js?

Filters can transform and format data in views. These can be applied to expressions and directives to modify the output before we display it. 

Q7. How many different types of directives are there in Angular.js?

There are three different types of directives in Angular.js.

• Element directives (custom HTML elements)
• Attribute directives (that can change the behavior of existing DOM elements)
• Class directives (apply behavior based on the presence of a CSS class)

Q8. How to use the concept of dependency injection in Angular.js?

Dependency injection is a design pattern we can use in Angular.js. This will manage dependencies between various components of an application. It will allow components to define their dependencies in a declarative manner, and make them more testable and modular.

Q9. How can you define a module in Angular.js?

A module in Angular.js can be defined using the angular.module() function. The function takes in the module name and an array of dependencies as parameters. For example: angular.module(‘myApp’, []).

Q10. What is the role of controllers in Angular.js?

Controllers in Angular.js are responsible for handling an application’s business logic . They can manage the behavior and data associated with a particular view.

Q11. What is the purpose of scopes in Angular.js?

Objects that bind an HTML view along with the controller. Scopes provide a context to store and access data, and facilitate communication between a view and a controller.

Q12. What is the purpose of services in Angular.js.

Singleton objects in Angular.js that provide reusable functionality throughout an application.services will encapsulate business logic, data access and other common operations. 

Q13. What is routing in Angular.js?

Routing in Angular.js is the ability to navigate between different pages or views of a single-page application. You can define routes, associate them with templates and controllers, and handle navigation between multiple pages. 

Q14. How can you handle form validation in Angular.js?

The form validation mechanism in Angular.js has a built-in form controller and multiple validation directives like ng-pattern, ng-required, and ng-minlength. These also support custom validation logic.

Q15. What are promises in Angular.js?

Objects in Angular.js that represent an eventual result are called Promises. 

Q16. What is a $scope in Angular.js?

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. For example:

Some of the key 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.

Q17. How the MVC structure works in Angular?

Angular.js is based on the MVC (Model-View-Controller) architecture. It can perform the operations listed below:

• Model is the lower level in the pattern that is responsible to maintain application data. 
• Controller of a view has business logic that manipulates data. It is a software code that will be used to control interactions between a Model and a View. 
• View is the HTML part that is responsible to display an application’s data. 

Q18. Explain the concept of controllers in AngularJs.

Controllers hold the JavaScript functions that will provide data and logic to the View or HTML UI. They will act as an interface between the Server side and HTML UI. A controller will accept $scope as a parameter that refers to the application/module that controller is going to control. Consider the example below:

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

app.controller('myCtrl', function($scope) {      

    $scope.firstName = "Aryan";      

    $scope.lastName = "Khanna";      

});      

Q19. List the main uses of Controllers in Angular.js.

AngularJS controllers are used to

• Set initial state of $scope object
• Add behavior to the $scope object

Q20. What are the expressions in AngularJS?

Code snippets that resolve to a value. Variables that are placed inside parenthesis are called expressions in Angular.js. They are added in the HTML elements and appear as the following syntax  {{expression}}. 

AngularJS expressions can also contain various valid expressions similar to JavaScript expressions. We can also use the operators between numbers, including strings, literals, objects, and arrays inside the expression {{ }}.

For example:

{{1+1}}  

{{Name + " " + email}} (string)  

{{ Country.Name }} (object)  

{{ fact[4] }} (array)

Q21. List the common Global API functions in Angular.

The commonly used Global API questions in Angular are as below:

• Angular.isString: return: true only if the given reference is of type string.
• Angular.lowercase: converts a string to lowercase
• Angular.uppercase: converts any string to uppercase.
• Angular.isNumber: returns true only if the reference is a numeric value or number.

Q22. Explain what us the $rootScope in AngularJS

The scope created in the Document Object Model (DOM) element. An application can have only one $rootScope that can be shared among other components. This has the ng-app directive and other scopes are called as it child scope. The $rootScope can watch propagate events and expressions. 

Q23. What are single page applications in AngularJS

Single page application (SPA) is a web application or website that can  interact with users dynamically. In AngularJS, JavaScript, HTML, and CSS fit on a single page. They performs navigation without refreshing the entire HTML page.

Q24. How will you create a new project using CLI in AngularJs

We can use the Command Line Interface (CLI) to create a fresh AngularJs project. Running the ng new project_name command creates a new AngularJs project. 

Q25. How does the auto bootstrap process works in AngularJs?

Angular can automatically initialize DOMContentLoaded event or when you download Angular.js script is to the browser.

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

1. Loads the module associated with the directive,
2. Creates application injector,
3. Compiles the DOM from the ng-app root element. The process is known as auto bootstrapping.

Q26. What does the digest cycle does in AngularJs?

An important part of the data binding process in AngularJs, that willcompare the old and new versions of the scope model. Digest cycle can be automatically or manually triggered by using $apply() function.

Q27. What are the basic requirements to work on an AngularJs project?

• Download the latest version of AngularJS from AngularJs.com. 
• Use google CDN (Content Delivery Network) or host the JS file locally to reference it.

Q28. What is AngularJs Material?

AngularJs Material offers a set of well-tested, reusable UI components for an AngularJs programmer. It is an implementation of the Material Design Specification of Google. 

Q29. What are the vital differences between various Angular versions.

Q30. What is ng-zone?

A JavaScript wrapper class denoted by Zone.js. Ng-zone enables developers to explicitly run certain code outside Angular’s zone. This inhibits angular to run any change detection.

Q31. State the main difference between Angular Component and Directive

Q32. What is Ahead of Time Compilation?

Angular AOT (Ahead of Time) is a compiler that will converts angular HTML and typescript code to JavaScript code.

Q33. State the different types of filters in AngularJs.

The different types of filters used in AngularJS are: 

1) Currency

2) Uppercase

3) Lowercase

4) orderBy

5) JSON

6)limitTo.

Q34. Explain the use of ngOnInit() function.

The function is a lifecycle hook that is called after completion of data-bound properties of the directive. 

Q35. What is the concept of transclusion in AngularJs?

Transclusion enables developers to reallocate the original directive children into a specific location within a template. The directive ng shows the insertion point for a transcluded DOM of the nearest parent directive, which is using transclusion. Ng-transclude-slot or ng-transclude directives are mainly used for transclusion.

Q36. What is the concept of Ahead of Time Compilation in AngularJs

AOT (Ahead of Time) is a compiler in AngularJs converts the angular HTML and typescript code into the JavaScript code.

Q37. State the different filter types in AngularJs.

1) Currency, 2) Uppercase, 3) Lowercase, 4) orderBy, 5) JSON, and 6) limitTo.

Q38. What is the ngOnInit() function used for in AngularJs?

ngOnInit () function is a lifecycle hook. It is being called after completion of data-bound properties of the directive.

Q39. What are pipes in AngularJs?

Pipes provide a simple method that transforms the data. They take in values like integers, arrays, data, and strings as input and divided by the pipe (|) symbol. It will then convert the data in the required format. Pipes display the same thing in the browser. AngularJs provides some in-built pipes. However, developers can also create their own pipes.

Q40. How is Ionic related to Angular?

Ionic covers the UI layer, I.e buttons, tabs, header, footer, cards, etc. it sits on top of frameworks like Angular, React, and Vue. 

Q41. Can we add Ionic to an existing Angular project?

Yes, we can use the Angular CLI’s ‘ng add’ command to add this feature. We can also add necessary imports to the @ionic/angular package. 

Q42. What primary language do Angular and Ionic frameworks use?

The frameworks have adopted TypeScript as their primary language for their client-side development.

Q43. What is the use of @inject in Angular?

@Injectable() is a decorator that defines a class as a service in Angular and allows Angular to inject it into a component as a dependency. Likewise, the @Injectable() decorator indicates that a component, pipe, class, or NgModule has a dependency on a service. The injector is the main mechanism.

Q44. Can we use Angular components in Ionic framework?

Ionic has standalone components since it’s 6.3.0 version release. These can be used in Angular 14 and 15 projects. 

Q45. How can we redirect from one page to another in Ionic?

We can use a redirect route that. The ionic router redirects to the path specified in a property when a defines ion-route-redirect is matched.

Q46. How can we get a Device ID in Ionic Angular?

We can get a device id using the code below in a home.ts class. 

import { Device } from '@capacitor/device';

const logDeviceInfo = async () => {
  const info = await Device.getInfo();

  console.log(info);
};

const logBatteryInfo = async () => {
  const info = await Device.getBatteryInfo();

  console.log(info);
};

Q47. How can we use the HttpClient module in the Angular Ionic project?

The module can be used without adding a separate dependency in Angular projects of Ionic. It can be imported from the @angular/common/.. built-in dependency of Ionic Angular apps. 

Q48. List some capacitor APIs that are useful for basic Ionic Angular apps

• Browser – to open browsers inside apps
• Camera – to open device camera within app
• Geolocation – to access device location services

Q49. Explain why AngularJS is better than JavaScript.

JavaScript is a programming language we can use to manipulate the DOM (Document Object Model). Whereas, AngularJS extends its capabilities with different technologies. JavaScript doesn’t support dependency injection. AngularJS supports both data binding and dependency injection.

Q50. List the benefits of using AngularJS for developing applications.

• Open source.
• Easily extendable.
• Easy to test.
• Follows an MVC (Model View Controller) structure.
• Google supported.
• No Pre-requisite knowledge.
• Easy to customize.
• Single page application (SPA)