Introduction to AngularJS Interview Questions and Answers
AngularJS interview questions serve several purposes. For employers, these questions help to assess a candidate’s knowledge of AngularJS and their ability to use it effectively. Interview questions can cover topics such as directives, routes, bootstrapping, dependency injection, and so on. Interview questions may differ on the basis of job categories; however, the following compilation comprises some of the most commonly asked questions in AngularJS interview.
The list of questions is in two major categories:
Part 1 – AngularJS Interview Questions (Basic)
Q1. Explain AngularJS in brief?
Answer:
AngularJS is a structural framework that allows developers to use HTML as a template language and extend its syntax, which provides flexibility and makes it easy to get started. It was developed by Google in 2009 and is designed to handle data binding and present all output within the browser. AngularJS can be considered a JavaScript framework that can be added to HTML pages using the <script> tag, and it offers developers the ability to write client-side applications using JavaScript.
Q2. Name directives in AngularJS that will define what variable value to be used.
Answer:
In AngularJS, the directives that can be used to define the value of a variable are primarily the ng-model directives. These directives allow the user to define the input type as text, email, name, and so on.
Use ng-model in the AngularJS Code:
Input Code:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Institute Name: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "EduCBA";
});
</script>
<p>That's how we can use this input directive as Text input.</p>
</body>
</html>Q3. Explain the code to enable the double-click button in AngularJS.
Answer:
To enable a double-click button in AngularJS, one can use the ng-dblclick directive. This directive allows defining custom behavior for a double-click event on a web page, and it can function as an attribute of an HTML element.
To create a sample code for a double-click event using AngularJS, one can first bind an input value to a textbox using the ng-model directive. Then, one can attach the ng-dblclick directive to the double-click button. Then, ‘Hello ‘+name is written, where ‘Hello’ is a string and the name is defined as the variable containing input value as TextBox.
The button – “Double Click for EduCBA,” will work when someone double-clicks on it.
Input Code:
<!doctype html>
<html ng-app>
<head>
<script src="angular.min.js"></script>
</head>
<body>
Name:
<input ng-model="name" type="text" />
<button ng-dblclick="Msg='Hello '+name">
Double Click for EduCBA
</button>
</br>
<h3>
Please double click - EduCBA
</h3>
</body>
</html>Q4. What do “routes” do in AngularJS?
Answer:
In AngularJS, “routes” enable the creation of different URLs for different content within an application. AngularJS routes allow users to bookmark specific content at different URLs for easy access in the future. These bookmarked URLs are the routes in AngularJS.
The values used in AngularJS routes are simple objects that belong to AngularJS. These values can serve as configuration injected into controllers, services, or factories. Adding a parameter can inject values into the AngularJS controller function, with the same name as the value.
Q5. Explain some unique features of AngularJS.
Answer:
Registering callbacks is not necessary in AngularJS, and this feature makes AngularJS code much more simple to debug. Also, the applications created using AngularJS never influence the DOM (Document Object Model).
AngularJS helps transfer the data to and from the UI, and it also helps eliminate issues like validating a form, validation error display, etc.
Q6. List all types of custom directives in AngularJS.
Answer:
Following are the Custom directives in AngularJS:
- Element directives: This directive works upon confronting the matching element.
- CSS class directives: Starts working when the same CSS style matches.
- Comment directives: It activates when a matching comment comes up.
- Attribute directives: Attribute directives come into the picture upon confronting the matching/same directives.
Q7. Explain different types of bootstrapping in AngularJS.
Answer:
Bootstrapping is simply starting or initializing the application. AngularJS has two types of bootstrapping:
- Automatic Bootstrapping: One adds the ng-app directive to the root element of the application. This tells AngularJS to automatically load the associated module and perform the compilation of the DOM.
- Manual Bootstrapping: To get more control over the initialization of the angular app, one uses manual bootstrapping. It provides control over how and when to start the app. Additionally, it is useful when one performs another operation before waking up the AngularJS and compilation of the page.
Q8. Explain any AngularJS service using the code.
Answer:
AngularJS services are objects or functions that perform specific tasks and can be built by developers. AngularJS developers can define their services and can explain the service’s name and factory function by registering it. Also, almost 30 to 35 inbuilt services are available for instant use, and $timeout is one of the AngularJS services. $timeout service changes the value in a specified number of milliseconds, and this service helps change the deal after a predefined time limit.
Input Code:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>EduCBA code will change this header will change after 3 seconds:</p>
<h1>{{myHeader}}</h1>
</div>
<p>The $timeout service works after a specified number of milliseconds.</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello EduCBA!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 3000);
});
</script>
</body>
</html>“This code will change the value to default after 3 seconds.”
Q9. Explain all the Security features in AngularJS.
Answer:
AngularJS provides the following built-in protections:
- Cross-site scripting prevention: This type of attack involves a hacker sending a request form and stealing private information from users.
- Injection attack prevention: This type of attack involves a hacker injecting malicious code into a website’s HTML, which can then execute on a user’s device.
- CSRF (Cross-site request forgery) protection: AngularJS provides protection against CSRF attacks for server-side communication. It does this through the use of an “Auth token” mechanism. Whenever users log in for the first time, it sends a user id and password to the server, returning an Auth token. that does the authentication in all future transactions.
Q10. Explain the Syntax to show the entered password using AngularJS.
Answer:
Using the below code, the developer can switch the visibility of the password to the user.
Input Code:
<!-- Password field -->
Password: <input type="password" value="EduCBA" id="myInput">
<!-- An element to switch between password visibility -->
<input type="checkbox" onclick="myFunction()">Show PasswordPart 2 – AngularJS Interview Questions (Advanced)
Let us now have a look at the advanced AngularJS Interview Questions:
11. Explain the different directives in AngularJS?
Answer:
These directives come into use when a developer wishes to extend the behavior of HTML and DOM elements. These have the prefix “–ng” that informs the compiler that the specified behavior is to be attached to that DOM element. The built-in AngularJS directives are as follows:
•ngBind,
•ngModel
•ngClass
•ngApp
•ngInit
•ngRepeat
One can use user-defined directives in applications with controllers and services. The following are the directives in detail:
- ngApp: This directive is important in AngularJS. It marks the starting of an Angular application to the AngularJS HTML compiler, like the main() function in any compile-time language like C++, Java, etc. If this directive is not written first and other directives are, then an error would be thrown.
- ngInit: It is a directive for initializing application data variables. These can be used in the blocks where they are declared. It is local to the ng-app and can be a collection of values.
- ngModel: This directive is a model to be used in HTML controls like <input type=’text’/>. It provides a binding behavior with the values. Hence, it has usage in data binding.
- ngClass: It is a built-in directive in Angular that allows one to conditionally add or remove CSS classes to an HTML element
- ngBind: It binds model variables with HTML controls and tags. A user can only see output values.
- ngRepeat: As the name suggests, it repeats HTML statements. It works similarly to a loop in languages like Java or PHP.
12. How to boot AngularJS?
Answer:
AngularJS initializes when the DOMContentLoaded event is triggered. Another way to start the initialization process is when one downloads the AngularJS script, and the document is ready. The ngApp directive then serves as the root of compilation and distinguishes the AngularJS part from the DOM. Upon calling the ngApp directive, the following happens:
- The module associated with the directive is loaded.
- An application injector is created.
- The DOM starting from the directive is compiled.
- This entire process is auto-bootstrapping.
13. What is jQLite? Write a small code to explain.
Answer:
It is a query built directly in AngularJS and is known as a subset of jQuery. The jQLite provides all the features of jQuery, which can work with AngularJS by simply loading the jQuery library beforehand.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="mainCtrl">
<input type="text" id="txtName" value="Debanjana Mukherjee" />
<button type="button" ng-click="clickme()">Click me</button>
</div>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller("mainCtrl", function($scope, $element) {
$scope.clickme = function() {
var elem = angular.element(document.querySelector('#txtName'));
console.log(elem.val()) // console the value of textbox
};
});
</script>
</body>
</html>14. Explain the $scope object in AngularJS. Explain with a small snippet.
Answer:
It is an object that binds the view with a controller. Data is accessed through the $scope object when the controller is triggered. The DOM object and controller can use this object as a communication means. This object can have both data as well as functions. Every AngularJS application has a $rootscope, created on the view, and has the ng-app directive.
The scope object helps in providing APIs to observe any model. It is a mediator between the view and controller and can be nested. But being nested does not give access to all properties, as the properties can be limited, and the nested scope can either have a child or isolated scope. It also provides a context against the expression to be evaluated.
<html>
<head>
<title>Angular JS Scope</title>
<script src="angular.js"></script>
<\head>
<body ng-app="myapp">
<h2>AngularJS - Scope Inheritance</h2>
<div ng-controller="ParentController">
<div ng-controller="firstChildController">
<div ng-controller="secondChildController">
<p>Parent Name:{{parentName}}</p>
<p>First Child Name:{{level1name}}</p>
<p>Second Child Name:{{level2name}}</p>
</div>
</div>
</div> In the above example, we have three controllers parent Controller, firstChildControllerand secondChildController. All three controllers are attached to DOM elements in a nested way. The expressions will be associated with the current scope and search for the parent scope until the rotoscope is reached.15. What is a SPA in AngularJS?
Answer:
Single Page Applications are dynamic pages that load a single HTML page and later update it as the user goes ahead and interacts with the application. However, this does not mean that this dynamic behavior impacts the server side, as these pages are loaded on the client side. SPAs use AJAX and HTML for creating responsive web applications.
As the application is a single page, once it delivers to the browser, it does not require to load repeatedly as the user will navigate to various parts of the application. This helps in faster navigation and efficient working of the web page.
16. What is dependency injection?
Answer:
When objects are passed as dependencies and remove hard-coded dependencies consequently, then the objects are to be injected. The need for dependency injection comes when we separate the creation and consumption of dependency. The use of this feature helps the user to change dependencies whenever required. Further, one can inject mock objects for testing purposes.
17. What happens upon calling a double-click event?
Answer:
The ng-dblclick can serve as an attribute in HTML. Using the event, one can customize the double-click as per the requirements. The process to customize it is by adding an external Angular.js file. Once one downloads the external file from the AngularJS official site, the developer can add the file to the head section of the HTML file.
18. Explain different ways to invoke a directive
Answer:
One can invoke a directive in four ways:
1) As an attribute: <time directive></time>
2) As a class: <time class =”directive: exp></time>
3) As an element: <new directive></new directive>
4) As comment: <!– directive: my-directive expression –>
19. What are filters?
Answer:
Filters help select a subset of items from an array and return a new array. They can display filtered items based on the specified criteria. The different filters provided by AngularJS are currency, date, limitTo, lowercase, number, etc.
20. What is the difference between the prefix $ and $$?
Answer:
When the name of an object has the prefix $, it is public, and when it has the prefix $$, the object is private.
Recommended Articles
Here are some further interview questions articles:
