Angularjs Interview Questions and Answers

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.

• 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

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.

The Compile function is used for templating DOM Manipulation and for collecting the directives. The Link function is used for registering the DOM listeners as well as for an instance the DOM manipulation. This function gets executed after the template has been cloned.

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.

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.

• 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.

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.

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.

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: