AngularJS Developer Interview Questions And Answers

AngularJS is a framework to build large scale and high performance web application while keeping them as easy-to-maintain. Following are the features of AngularJS framework.

☛ AngularJS is a powerful JavaScript based development framework to create RICH Internet Application (RIA).
☛ AngularJS provides developers options to write client side application (using JavaScript) in a clean MVC (Model View Controller) way.
☛ Application written in AngularJS is cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser.
☛ AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.

Deep linking allows you to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.

ng-app directive defines and links an AngularJS application to HTML. It also indicate the start of the application.

ng-repeat directive repeats html elements for each item in a collection.

orderby filter orders the array based on provided criteria.

In below example, to order subjects by marks, we've used orderBy marks.

Subject:
<ul>
<li ng-repeat = "subject in student.subjects | orderBy:'marks'">
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>

angular.module is used to create AngularJS modules along with its dependent modules. Consider the following example:

var mainApp = angular.module("mainApp", []);
Here we've declared an application mainApp module using angular.module function. We've passed an empty array to it. This array generally contains dependent modules declared earlier.

Using factory method, we first define a factory and then assign method to it.

var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
var factory = {};

factory.multiply = function(a, b) {
return a * b
}
return factory;
});

AngularJS provides support to create custom directives for following type of elements.

☛ Element directives − Directive activates when a matching element is encountered.
☛ Attribute − Directive activates when a matching attribute is encountered.
☛ CSS − Directive activates when a matching css style is encountered.
☛ Comment − Directive activates when a matching comment is encountered.

It relies on $interpolation, a service which is called by the compiler. It evaluates text and markup which may contain AngularJS expressions. For every interpolated expression, a “watch()” is set. $interpolation returns a function, which has a single argument, “context”. By calling that function and providing a scope as context, the expressions are “$parse()”d against that scope.

TL;DR Summary: To reduce memory consumption and improve performance it is a good idea to limit the number of watches on a page to 2,000. A utility called ng-stats can help track your watch count and digest cycles.

Jank happens when your application cannot keep up with the screen refresh rate. To achieve 60 frames-per-second, you only have about 16 milliseconds for your code to execute. It is crucial that the scope digest cycles are as short as possible for your application to be responsive and smooth. Memory use and digest cycle performance are directly affected by the number of active watches. Therefore, it is best to keep the number of watches below 2,000. The open-source utility ng-stats gives developers insight into the number of watches Angular is managing, as well as the frequency and duration of digest cycles over time.

Caution: Be wary of relying on a “single magic metric” as the golden rule to follow. You must take the context of your application into account. The number of watches is simply a basic health signal. If you have many thousands of watches, or worse, if you see that number continue to grow as you interact with your page. Those are strong indications that you should look under the hood and review your code.

This question is valuable as it gives insight into how the candidate debugs runtime issues while creating a discussion about performance and optimization.

The ngIf Directive, when applied to an element, will remove that element from the DOM if it’s condition is false.

End-to-end (e2e) testing is the practice of testing an application from start to finish to determine whether all the components are working together properly. If unit tests are the first line of defense against bugs within the individual components, e2e testing can be thought of as the safety net that catches issues related to integration and flow within an application. The AngularJS team built Protractor, a Node.js application that can simulate user interactions and help developers test the overall health of their AngularJS applications. It’s a good idea to ask an applicant about past experiences using Protractor to perform e2e testing on AngularJS applications.

Automatic synchronization of data between the model and view components is referred as data binding in AngularJS. There are two ways for data binding

Data mining in classical template systems
Data binding in angular templates

☛ Compile function: It is used for template DOM Manipulation and collect all of the directives.
☛ Link function: It is used for registering DOM listeners as well as instance DOM manipulation. It is executed once the template has been cloned.

Following are some of the key reasons to choose AngularJS as you web development framework:

☛ It uses MVC design pattern which allows segregating an application into different components (called Model, View, and Controller) thus making it easy to maintain.
☛ It allows extending the HTML by attaching directives to your HTML markup. This provides the capability to define new powerful templates having new attributes, tags, and expressions.
☛ It allows you to create your own directives and also make reusable components. Directives help the developer to concentrate on creating logic, thus enabling them to work efficiently.
☛ It supports two-way data binding i.e. enables automatic synchronization of data between model and view components. Thus, any update in the model gets reflected in the view automatically. And there is no need to add any Javascript code or event listeners to reflect the data changes.
☛ It encapsulates the behavior of your application in controllers which gets instantiated with the help of dependency injection.
☛ It supports built-in services that perform the common tasks for web applications. For example, it provides $http service to communicate with REST service.
☛ It makes the development and testing of the application’s JavaScript code easy.
☛ Also, AngularJS has a mature community to help the developers. It has wide support over the internet.

AngularJS directives are only used to extend HTML and DOM elements' behavior. These are the special attributes, that start with ng- prefix, that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element.

AngularJS has a set of built-in directives like

☛ ngBind,
☛ ngModel
☛ ngClass
☛ ngApp
☛ ngInit
☛ ngRepeat

We can create our own directives for Angular to use them in our AngularJS Application with the controllers and services too. In this article, we’ll learn about some most important built-in directives like: ng-app, ng-init, ng-model, ng-bind and ng-repeat.

☛ ng-app

It is the most important directive for an Angular Application, which is used to indicate starting of an Angular Application to AngularJS HTML compiler ($compile), like a “Main()” function in any compile time language like C#, Java or C++ etc. If we do not use this directive first and directly try to write other directives, it gives an error.

☛ ng-init

ng-init directive is used to initialize an AngularJS Application data variable's inline statement, so that we can use those in the specified block where we declare them. It is like a local member of that ng-app and it can be a value or a collection of the values and as an array, it directly supports JSON data.

☛ ng-model

ng-model directive is used to define the model/variables value to be used in AngularJS Application’s HTML controls like <input type=’text’/> and it also provides two-way binding behavior with the model value. In some cases, it’s also used for databinding.

☛ ng-bind

ng-bind directive is also used to bind the model/variable's value to AngularJS Applications HTML controls as well as with HTML tags attributes like: <p/>, <span/> and more, but it does not support two way binding. We can just see the output of the model values.

☛ ng-repeat

ng-repeat directive is used to repeat HTML statements. Ng-repeat works the same as for each loop in C#, Java or PHP on a specific collection item like an array.

Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events. The characteristics of Scope are:

Scopes provide APIs ($watch) to observe model mutations.

☛ Scopes provide APIs ($apply) to propagate any model changes through the system into the view from outside of the “Angular realm” (controllers, services, Angular event handlers).
☛ Scopes can be nested to limit access to the properties of application components while providing access to shared model properties. Nested scopes are either “child scopes” or “isolate scopes”. A “child scope” (prototypically) inherits properties from its parent scope. An “isolate scope” does not. See isolated scopes for more information.
☛ Scopes provide context against which expressions are evaluated. For example {{username}} expression is meaningless, unless it is evaluated against a specific scope which defines the username property.

TypeScript is a typed super set of JavaScript which has been built and maintained by Microsoft and chosen by the AngularJS team for development. The presence of types makes the code written in TypeScript less prone to run-time errors. In recent times, the support for ES6 has been greatly improved and a few features from ES7 have been added as well.

AngularJS extends the behavior of HTML and DOM elements with new attributes called Directives. It directs the AngularJS’s HTML compiler ($compile) to attach a special behavior to that DOM element. This AngularJS component starts with prefix “ng”.

Following is the list of AngularJS built-in directives.

☛ ng-bind – The ng-bind directive tells AngularJS to replace the content of an HTML element with the value of a given variable, or expression.
☛ If there is any change in the value of the given variable or expression, then the content of the specified HTML element will also be updated accordingly. It supports one-way binding only.
☛ ng-model – This directive is used to bind the value of HTML controls (input, select, text area) to application data. It is responsible for binding the view into the model, which other directives such as input, text area, and select require. It supports two-way data binding.
☛ ng-class – This directive dynamically binds one or more CSS classes to an HTML element. The value of the ng-class directive can be a string, an object, or an array.
☛ ng-app – Just like the “Main()” function of Java language, this directive marks the beginning of the application to AngularJS’s HTML compiler ($compile). If we do not use this directive first, an error gets generated.
☛ ng-init – This is used to initialize the application data so that we can use it in the block where it is declared. If an application requires local data like a single value or an array of values, this can be achieved using the ng-init directive.
☛ ng-repeat – This repeats a set of HTML statements for defined number of times. The set of HTML statements will be repeated once per item in a collection. This collection must be an array or an object.
☛ We can even create our own directives too and use them in our AngularJS Application.

AngularJS provides built-in protection from the following security flaws.

☛ It prevents cross-side scripting attacks: Cross-site scripting is a technique where anyone can send a request from client side and can get the confidential information easily.
☛ It prevents HTML injection attacks.
☛ It prevents XSRF protection for server side communication: It can be handled by “Auth token” mechanism. When the user logins for the first time a user id and password is sent to the server and it will, in turn, return an auth token. Now, this token does the authentication in the future transactions.

Each angular application consist of one root scope but may have several child scopes. As child controllers and some directives create new child scopes, application can have multiple scopes. When new scopes are formed or created they are added as a children of their parent scope. Similar to DOM, they also creates a hierarchical structure.

Compilation of HTML process occurs in following ways

☛ Using the standard browser API, first the HTML is parsed into DOM
☛ By using the call to the $compile () method, compilation of the DOM is performed. The method traverses the DOM and matches the directives.
☛ Link the template with scope by calling the linking function returned from the previous step

The key features of AngularJS are

☛ Scope
☛ Controller
☛ Model
☛ View
☛ Services
☛ Data Binding
☛ Directives
☛ Filters
☛ Testable

This question might seem basic at first glance, but what you’re really doing is giving the developer a chance to show you what they know about your chosen framework. AngularJS is a powerful JavaScript-based development framework designed to create dynamic single-page applications with fewer lines of code. Some of the key advantages that you’ll want to look for in their response are listed below.
☛ Data binding is as easy as writing in your code.
☛ AngularJS was made for CRUD applications, which happen to represent the majority of web apps (excluding DOM manipulation-intensive applications like games and GUI editors).
☛ It separates DOM manipulation from app logic, making code modular and easy to test.
☛ It’s a comprehensive client-side solution in that it decouples the client-side from server-side development effort.
☛ It saves months of development time by freeing the developer from having to write repetitive low-level DOM manipulation tasks, manually registering callbacks, and otherwise automating most AJAX application tasks.
☛ It’s great for providing a “desktop-like” experience to the end user.

It is definitely a bad practice. We need to stay away from jQuery and try to realize the solution with an AngularJS approach. jQuery takes a traditional imperative approach to manipulating the DOM, and in an imperative approach, it is up to the programmer to express the individual steps leading up to the desired outcome.

AngularJS, however, takes a declarative approach to DOM manipulation. Here, instead of worrying about all of the step by step details regarding how to do the desired outcome, we are just declaring what we want and AngularJS worries about the rest, taking care of everything for us.