Wednesday 5 April 2017

How would you make an Angular service return a promise? Write a code snippet as an example

To add promise functionality to a service, we inject the “$q” dependency in the service, and then use it like so:

angular.factory('testService', function($q){ return { getName: function(){ var deferred = $q.defer(); //API call here that returns data testAPI.getName().then(function(name){ deferred.resolve(name) }) return deferred.promise; } } })

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

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

What directive would you use to hide elements from the HTML DOM by removing them from that DOM not changing their styling?

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

Explain how $scope.$apply() works in angular js?

$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

What is the difference between one-way binding and two-way binding in angular js?

– One way binding implies that the scope variable in the html will be set to the first value its model is bound to (i.e. assigned to)

– Two way binding implies that the scope variable will change it’s value everytime its model is assigned to a different value

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

By using “::” in front of it.

 This allows the check if the candidate is aware of the available variable bindings in AngularJS.

If you were to migrate from Angular 1.4 to Angular 1.5, what is the main thing that would need refactoring?

Changing .directive to .component to adapt to the new Angular 1.5 components

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

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.

Where should we implement the DOM manipulation in AngularJS?

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

What is a digest cycle in AngularJS?

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.

What is the difference between ng-show / ng-hide and ng-if directives?

ng-show/ng-hide will always insert the DOM element, but will display/hide it based on the condition. ng-if will not insert the DOM element until the condition is not fulfilled.
ng-if is better when we needed the DOM to be loaded conditionally, as it will help load page bit faster compared to ng-show/ng-hide.
We only need to keep in mind what the difference between these directives is, so deciding which one to use totally depends on the task requirements.

How do you share data between controllers in Angular js?

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.