Angularjs Interview Questions and Answers

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.

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

2009

• 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

AngularJS follows MVC architecture. Here is a diagram of the MVC framework to bring some clarity.

Controllers: Basically used to represent the layer comprising of the business logic. The user events trigger functions that have been stored in the controller.

Views: These are used in the Angular architecture to depict the presentation layer provided to the end-users/consumers.

Models: In Angular, models are used to represent your data.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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

The ngClock directive is used in Angular to prevent the HTML template display from flickering while the data loads. Adding the ng-cloak at the angular js root element(ag-app) will display the view on-screen, but, only after Angular compiles the DOM elements first. To ensure flickering does not continue, follow these steps:

• Add the ng-clock directive to your page root element. One of the perfect positions might be <body> tag of page or the root <div> element.
• Now, apply this code to the style sheet (CSS) to apply the style of the ng-clock class.

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);
  }
}

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.

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:

Yes, we can implement nested controllers 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:

The parent scope in Angular refers to the scope of the parent element of any page.

Now, in the above case, you can access the variables attached to the parentController using the childController through the parent scope.

In ANgular, all the applications have a $rootScope which is basically the scope created on an HTML element containing the ng-app directive.

In Angular, a provider is a type of an object having a $get() method. In this, the injector is used to calls the $get method for creating a new instance within a service. The provider in AngularJS allows users to create a configurable service in which an input can be used to set on each application for the service created using the provider() function.