Keyword

AngularJS directives can be written in HTML element as:

What is service in AngularJS?

AngularJS filters ___________.

AngularJS module can be created using ________.

Which of the following service is used to handle uncaught exceptions in AngularJS?

Which of the following is validation css class in AngularJS

List at least three ways to communicate between modules of your application using core AngularJS functionality.

Answer:

Common ways to communicate between modules of your application using core AngularJS functionality include:

• Using services
• Using events
• By assigning models on $rootScope
• Directly between controllers, using $parent, $$childHead, $$nextSibling, etc.
• Directly between controllers, using ControllerAs, or other forms of inheritance

The most popular e2e testing tool for AngularJS is Protractor. There are also others which rely on similar mechanisms. Describe how e2e testing of AngularJS applications work.

Answer:

The e2e tests are executed against a running app, that is a fully initialized system. They most often spawn a browser instance and involve the actual input of commands through the user interface. The written code is evaluated by an automation program, such as a Selenium server (webdriver). That program sends commands to a browser instance, then evaluates the visible results and reports back to the user.

The assertions are handled by another library, for Protractor the default is Jasmine. Before Protractor, there was a module called Angular Scenarios, which usually was executed through Karma, and is now deprecated. Should you want to e2e test hybrid apps, you could use another Selenium server, called Appium.

Testing can be handled manually, or it can be delegated to continuous integration servers, either custom or ones provided by Travis, SauceLabs, and Codeship.

When a scope is terminated, two similar “destroy” events are fired. What are they used for, and why are there two?

Answer:

The first one is an AngularJS event, “$destroy”, and the second one is a jqLite / jQuery event “$destroy”. The first one can be used by AngularJS scopes where they are accessible, such as in controllers or link functions.

Consider the two below happening in a directive’s postLink function. The AngularJS event:

scope.$on(‘$destroy’, function () {
  // handle the destroy, i.e. clean up.
});

And

element.on(‘$destroy’, function () {
  // respectful jQuery plugins already have this handler.
  // angular.element(document.body).off(‘someCustomEvent’);
});

The jqLite / jQuery event is called whenever a node is removed, which may just happen without scope teardown.

Name and describe the phases of a directive definition function execution, or describe how directives are instantiated.

Answer:

The flow is as follows:

First, the “$compile()” function is executed which returns two link functions, preLink and postLink. That function is executed for every directive, starting from parent, then child, then grandchild.

Secondly, two functions are executed for every directive: the controller and the prelink function. The order of execution again starts with the parent element, then child, then grandchild, etc.

The last function postLink is executed in the inverse order. That is, it is first executed for grandchild, then child, then parent.

A great explanation of how directives are handled in AngularJS is available in the AngularJS Tutorial: Demystifying Custom Directives post on the Toptal blog.

How does interpolation, e.g. “{{ someModel }}”, actually work?

Answer:

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.

List a few ways to improve performance in an AngularJS app.

Answer:

The two officially recommended methods for production are disabling debug data and enabling strict DI mode.

The first one can be enabled through the $compileProvider:

myApp.config(function ($compileProvider) {
  $compileProvider.debugInfoEnabled(false);
});

That tweak disables appending scope to elements, making scopes inaccessible from the console. The second one can be set as a directive:

<html ng-app=“myApp” ng-strict-di>

The performance gain lies in the fact that the injected modules are annotated explicitly, hence they don’t need to be discovered dynamically.

You don’t need to annotate yourself, just use some automated build tool and library for that.

Two other popular ways are:

• Using one-time binding where possible. Those bindings are set, e.g. in “{{ ::someModel }}” interpolations by prefixing the model with two colons. In such a case, no watch is set and the model is ignored during digest.
• Making $httpProvider use applyAsync:

myApp.config(function ($httpProvider) {
  $httpProvider.useApplyAsync(true);
});

… which executes nearby digest calls just once, using a zero timeout.

What are the basic steps to unit test an AngularJS filter?

Answer:

1. Inject the module that contains the filter.
2. Provide any mocks that the filter relies on.
3. Get an instance of the filter using $filter('yourFilterName').
4. Assert your expectations.

Dependency injection is a powerful software design pattern that Angular employs to compose responsibilities through an intrinsic interface. However, for those new to the process, it can be puzzling where you need to configure and mock these dependencies when creating your isolated unit tests. The open-source project “Angular Test Patterns” is a free resource that is focused on dispelling such confusion through high-quality examples.

This question is useful since it can give you a feel for how familiar the candidate is with automated testing (TDD, BDD, E2E), as well as open up a conversation about approaches to code quality.

How do you share data between controllers?

Answer:

Create an AngularJS service that will hold the data and inject it inside of the controllers.

Using a service is the cleanest, fastest and easiest way to test.
However, there are couple of other ways to implement data sharing between controllers, like:
– Using events
– Using $parent, nextSibling, controllerAs, etc. to directly access the controllers
– Using the $rootScope to add the data on (not a good practice)
The methods above are all correct, but are not the most efficient and easy to test.
Here is a good video explanation on egghead.io.

What is a digest cycle in AngularJS?

Answer:

In each digest cycle Angular compares the old and the new version of the scope model values. The digest cycle is triggered automatically. We can also use $apply() if we want to trigger the digest cycle manually.

For more information, take a look in the ng-book explanation: The Digest Loop and $apply

Where should we implement the DOM manipulation in AngularJS?

Answer:

In the directives. DOM Manipulations should not exist in controllers, services or anywhere else but in directives.

Here is a detailed explanation

Is it a good or bad practice to use AngularJS together with jQuery?

Answer:

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.
Here is a detailed explanation

How would you specify that a scope variable should have one-time binding only?

Answer:

By using “::” in front of it. This allows the check if the candidate is aware of the available variable bindings in AngularJS.

Explain how $scope.$apply() works

Answer:

$scope.$apply re-evaluates all the declared ng-models and applies the change to any that have been altered (i.e. assigned to a new value)
Explanation: $scope.$apply() is one of the core angular functions that should never be used explicitly, it forces the angular engine to run on all the watched variables and all external variables and apply the changes on their values
Source: https://docs.angularjs.org/api/ng/type/$rootScope.Scope

What makes the angular.copy() method so powerful?

Answer:

It creates a deep copy of the variable.

A deep copy of a variable means it doesn’t point to the same memory reference as that variable. Usually assigning one variable to another creates a “shallow copy”, which makes the two variables point to the same memory reference. Therefore if we change one, the other changes as well

Sources:
– https://docs.angularjs.org/api/ng/function/angular.copy
– https://en.wikipedia.org/wiki/Object_copying