Loading…

Angularjs Interview Questions and Answers

By Umesh Singh
Last update: 19 Jun 2020, 39 Questions
Angularjs Interview Questions

A JavaScript client-side framework, AngularJS offers a structured method of building websites and applications. It is a structural framework which is used to develop the dynamic web app. We have an impressive collection of AngularJS Interview Questions that is a must-read for all developers and designers!. Its JavaScript library enforces the Model View Controller (MVC) framework. AngularJS I said to be one of the most widely used JavaScript client-side frameworks in the world.

Quick Facts About AngularJS
What is the latest version of Angular? Angular 9.1.9 released on 20th May 2020
When did angular release? 4th May 2018
When was Angular first released? Angular 2.0 and released on 14th September 2016
What language does Angular use? TypeScript
Official website https://angular.io

Our angular questions has been created by seasoned Angular experts. It shall help you to answer some of the most frequently asked questions during an job interview.

Most Frequently Asked Angularjs Interview Questions

1. What is the use of a filter in AngularJS?

It is used to format the value of the expression to display the output. AngularJS enables us to apply filter. It can be added to expressions by using the pipe character |, followed by a filter.

Example

                                                    

<div ng-app="myApp" ng-controller="personCtrl">    
<p>The name is {{ firstName | uppercase }}</p>    
</div>    
<script>    
angular.module('myApp', []).controller('personCtrl', function($scope) {    
    $scope.firstName = "Umesh",    
    $scope.lastName = "Singh"
});
</script>

2. What are the features of AngularJS?
  • Easy to implement MVC.
  • Makes HTML more intuitive and easier to maintain.
  • Easier to access, manipulate, and implement.
  • Applications use very less code compared to other JavaScript applications.
  • Supports test-driven development approach (TDD)
  • Unit Testing
3. What do you mean by data binding?

Data binding is automatic synchronization of the data between the view and model components. Data binding lets you treat the model components as a single source of truth in your applications. The view component is a projection of the model. When the model changes, the view will reflect the change, and vice versa.

NOTE: This information is likely to be asked in angularjs interview questions.

5. How to handle 'Loading chunk failed' error in Angularjs?

In Angular, the lazy loading feature is a design pattern to load the NgModules as needed, which then splits the build file into multiple chunks and loads them on-demand to speed up the page load.

Using the lazy loading feature may result with you having to face a common issue “Loading chunk [number] failed” while navigating any route and here are the steps to fix it: This is the exact error displayed:

Error: Uncaught (in promise): Error: Loading chunk 0 failed.

This error’s main culprit is browser caching. To solve this, we need a global error handling while forcing the app to reload if any of the chunks fail to load.

import { ErrorHandler } from '@angular/core';
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
handleError(error: any): void {
const chunkFailedMessage = /Loading chunk [\d]+ failed/;
if (chunkFailedMessage.test(err.message)) {
window.location.reload();
}
}
}

This above GlobalErrorHandler class we have created will have only one job. That is, checking all the error messages for Loading chunk [number] failed and if there is one, then Angular forces to reload the app in order to load all the chunks again.

6. What is bootstrapping in Angularjs?

Bootstrapping is a term for initializing the Angular app. Both automatic and manual bootstrapping is supported in AngularJS. Automatic Bootstrapping is done by adding an ng-app directive to the root of the application. Manual Bootstrapping provides control on how and when to initialize the app. It is useful in performing any operation before Angular compiles the page.

7. What are the different types of filters in AngularJS?
  • Currency It formats a number to a currency format.
  • Date It formats a date to a specified format
  • Filter It selects a subset of items from an array.
  • JSON It formats an object to a Json string
  • Limit It is used to limit an array/string, into a specified number of elements/characters.
  • Lowercase It formats a string to lower case
  • Uppercase It formats a string to upper case.
  • Number It formats a number to a string.
8. What is Single Page Application? How can the SPA be implemented with Angular?

Single Page Applications are web apps that load an HTML page and dynamically update it as and when users interact with the app. However, please note that in an SPA, the page will never reload, though parts of that page may get refreshed. This functionality reduces the trips to the server. SPA can be implemented with Angular through Angular routes.

9. What is a Singleton pattern? How do you use it?

The singleton pattern allows us to limit the instantiation of a class in order to have only one object. We can use the dependency injection and services for enabling the singleton pattern. Whenever the singleton pattern is enabled, the class will create the object and return a reference in the next call.

NOTE: Learn the basic concept of Singleton pattern and work to crack the angular interview questions and answers for experienced.

10. What are promises in AngularJS?

Promises are provided by the in-built $qservice in AngularJS. It is used to provide a way to execute multiple asynchronous functions in series by basically registering them with an object of promise. Promises are used widely in Angular, Javascript and the ES6 specifications equally.

Here’s an example of a promise object in Angular:

Example

                                                    

.run(function(getData) {
  var promise = getData()
    .then(function(string) {
      console.log(string)
    })
})

11. What is the core difference between AngularJS compilation and JavaScript frameworks?

Most of the Javascript frameworks parse the HTML template as a stream and return the result as a string. The resulting string gets dumped into the DOM and can be retrieved using innerHTML(). AngularJS works directly on HTML DOM rather than strings. It uses two-way data binding to sync the data.

12. What is the difference between directives and services?

Services are one of the ways to communicate with controllers, but it is possible to inject one service into another. Services can be used for doing other things like authentication and logging.

Directives are for creating widgets or wrapping things like jquery plugins. However, if you do not need two-way data binding, then you do not need to wrap them.

13. What is the difference between factory and service in AngularJS?
Service Factory
Creates a service object in Angular by using the "new" keyword. In Angular, factories are the most popular way to create and configure a service.
It does not use a type-friendly injection mode. It uses a type-friendly injection mode.
It cannot create primitives. Factory can be used to build primitives.
It is configurable. It is not configurable.

Example

                                                    

Example of a Factory in Angular

app.controller('myFactoryCtrl', function ($scope, myFactory) {
  $scope.artist = myFactory.getArtist()
})

app.factory('myFactory', function () {
  var _artist = '';
  var service = {}

  service.getArtist = function () {
    return _artist
  }

  return service;
})

Example of a Service in Angular

app.controller('myServiceCtrl', function ($scope, myService) {
  $scope.artist = myService.getArtist();
});

app.service('myService', function () {
  var _artist = '';
  this.getArtist = function () {
    return _artist;
  }
});

14. What is routing in AngularJS?

It is a mechanism that makes an application as a Single Page Application. It routes the application to different pages without reloading the whole application.

15. How to get image width height in angular js, before uploading a file?

getCheckDimenstions(ev: Event) {
   if (ev && ev.target && ev.target.files) {
     const file = ev.target.files[0];
     const img = new Image();
     img.onload = function() {
       alert('Width:' + this.width + ' Height: ' + this.height);
     };
     img.src = URL.createObjectURL(file);
  }
}

16. Why do we use directives in AngularJS?

Directives are a core feature of AngularJS that allows you to discover new HTML syntax, which is specific to your particular application. Directives are functions that execute when the Angular compiler finds them in DOM. The different types of directives are an element, attribute, CSS class, and comment.

17. What is an injector?

An injector is a service locator that is used to retrieve the object instances as defined by the invoke methods, provider, load modules, and instantiate types.

Note: Our aim while creating angular interview questions and answers, is to help you grow as an Angular Developer. The questions mentioned here have been asked by leading organizations during technical rounds of the interview process.

Example

                                                    

var $injector = angular.injector();
expect($injector.get('$injector')).toBe($injector);
expect($injector.invoke(function($injector) {
   return $injector;
})).toBe($injector);

18. What is the factory method?

The factory method, used for creating a directive, gets invoked when the compiler matches the directive for the first time. This function can be invoked by $injector.invoke.

Syntax: module.factory( 'factoryName', function );

When you declare factoryName as an injectable argument, you will get the value which will be returned by invoking the function reference passed to the module.factory.

19. Is the jQuery library used in Angular?

Yes, Angular uses jQuery if it is present in the app when your application is being bootstrapped. However, if jQuery is not present in the script path, Angular will fall back to its own implementation of the subset of jQuery. This is called jQLite.

20. Do you know scope in Angular?

In Angular, the scope is the binding part between the HTML, i.e. the view and the Javascript, urf, controller. It acts like an object having various available properties and methods. The scope is available for both modes, view and controller. Here’s an example of how to use the scope in Angularjs properly:

Example

                                                    

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

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

app.controller('myCtrl', function($scope) {
  $scope.carname = "Volvo";
});
</script>

21. Is it possible to have multiple ng-app directives on a single page?

No. You can auto-bootstrapped only one AngularJS application per HTML document. However, the first ngApp found will be used by default to define the root element to auto-bootstrap. Yet, if another ng-app directive gets placed, then it will not be processed by AngularJS. In this case, you should manually bootstrap the second app instead of using the second ng-app directive.

22. What is scope hierarchy? How many scopes can an application have?

Each application contains one root scope and several child scopes. And, when new scopes get created, they get added as children of the parent scope. Similar to DOM, they create a hierarchical structure.

You can easily get marks in this Angularjs Interview Question by just naming the types of fits in Angular Interviews.

23. What is linking function? What are post linking and pre-linking functions?

Links combine the directives with a scope and help in producing a view. The link function registerS DOM listeners and for updating the DOM. It gets executed once the template is cloned.

The pre-linking function gets executed before linking the child elements. Pre-linking is not safe for DOM transformation. Post linking is executed after linking the child elements. Post linking is safe for DOM transformation.

24. Can we have implement nested controllers in AngularJS?

Yes, we can implement nested controllers in Angularjs.

27. What is AngularJS?

A JavaScript client-side framework, AngularJS offers a structured method of building websites and applications.Its JavaScript library enforces the Model View Controller (MVC) framework. AngularJS i said to be one of the most widely used JavaScript client-side frameworks in the world.

28. Who is the Author of Angular JS?

AngularJS was developed by Misko Hevery and Adam Abrons. The framework is maintained by Google now.

31. What do you mean by Controllers?

Controllers are essentially Javascript functions that provide data and logic to the HTML user interface. As the name suggests, controllers are designed to control how data will flow from the server to the HTML user interface.

32. What is internationalization? How can it be implemented in AngularJS?

Internationalization allows you to show locale-specific information on a site. AngularJS is supporting inbuilt internationalization only for three types of filters: date, currency, and numbers. In order to implement internalization, you only need to incorporate the corresponding js as per the locale of the country. It will handle the locale of the browser by default.

33. What do you mean by $rootscope in AngularJS?

Every application contains a single root scope, and the rest of the scopes are descendant scopes of the root scope. The function of scopes is to provide separation between the view and the model, via a mechanism for observing the model for changes. Scopes also provide event emission, event broadcast, and subscription facilities.

Note: This angular interview questions and answers for experienced peoples

34. What is string interpolation?

The compiler matches attributes and text using interpolate service to check if they contain any embedded expressions. As part of the normal cycle, these expressions will get updated and registered as watches.

35. What do you mean by ng-template?

The ng-template allows us to create an HTML page using the script tag. This template contains "id" attribute that can be used by the $routeProvider to map view model with a controller.

36. What variables are used with ng-repeat?

This directive has unique variables that are useful for iterating the collection. Some of these variables include, $index, $first, $middle, and $last.

37. What is the module in AngularJS?

A module is a container for the different parts of the application like services, controller, filters, directives, etc. Module treats as a main() function. It is created using an object's module() method.

Example

                                                    

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

38. What are the expressions in AngularJS?

It is the code snippets that resolves to a value. AngularJS expressions are placed inside {{expression}}.

For Example:{{1+1}}

It supports one-time binding expressions.

Development History of Angular JS

AngularJS was developed by Misko Hevery and Adam Abrons in 2009. The framework is maintained by Google now.

It is not a single piece in the overall puzzle of building the client-side of a web application. It also handles all of the AJAX and DOM code you once wrote by hand and puts it in a clear structure.

Advantages of AngularJS
  • Easy to implement MVC.
  • Makes HTML more intuitive and easier to maintain.
  • More comfortable to access, manipulate, and implement.
  • Applications use very less code compared to other JavaScript applications.
  • Supports the test-driven development approach (TDD)

Though every interview is different, we can help you crack your next interview with the most commonly asked Angularjs Interview Questions, which will help you achieve success.

Installation Steps
  • Open the link https://angularjs.org/
  • You will see two options on this page - View on GitHub and Download.
  • Click the download button, and it will start downloading angular.min.js.
  • Create an HTML page and include the following AngularJS JavaScript file
    http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js with script tag
  • Run the HTML page in the browser.