AngularJS Developer Interview Preparation Guide

Download PDF

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.