030 AngularJS Interview Question And Answer

1)What is AngularJS?

                              AngularJS is it javaScript framework for rich  application. AngularJS is used for single page (SPA) application. AngularJS is written on javaScript. AngularJS Framework is nothing but a javaScript library .AngularJS , instead of changing inner HTML, it manipulate DOM. This makes AngularJS responsive  and faster.

 

2)Mention some advantages of using AngularJS framework.

• AngularJS is cross browser compatible. It automatically handle. Browser specific javaScript to handle a task.

• AngularJS is free and open source framework. 

• AngularJS is unit testable.

• AngularJS provide reusable component.

• You can communicate with server by XHR/JSONP. 

 

3)Is AngularJS compatible with all browsers? 

 

     Yes,AngularJS is cross browser compatible. It automatically handle browser specific javaScript to handle a task.

4)What are the key features of AngularJS?

AngularJS is cross browser compatible. It automatically handle browser specific javaScript to handle a task. 

• AngularJS start with </script> .

• AngularJS is free and open source framework.

• For each page AngularJS library need to be incorporated before using AngularJS .

• AngularJS follows MVC architecture. It is actually client side MVC architecture with two way data binding.

• AngularJS is unit testable.

• AngularJS provide reusable component.

• You can communicate with server by XHR/JSONP.

• AngularJS load automatically , when a web page is load.

5)Explain the concept of scope hierarchy.

See answer 17.

6)What is dependency injection ?

  Dependency injection is a technique where one object is supplied dependencies of another object .Instead of hard coding ,object is given dependencies of another object .In this pattern, object are given their dependencies instead of coding them within the object, Injection is passing of dependency to a dependent object .This helps a service reusable, maintainable and testable,easily understandable.

AngularJS  support Dependency injection.The following type of dependency injection are possible in AngularJS.

1. value
2. factory
3. service
4. provider
5. constant

These objects and components can be injected into each other using AngularJS Dependency Injection.

7)What are the benefits of dependency injection?

1. Reducing the dependency between objects in application.
2. Objects in application could individually unit testing with different mock implementation.
3. Objects are loosely coupled or it promotes decoupling to application
4. Promotes re-usability of code or objects in different applications
5. Promotes logical abstraction of components.

8)What is Single Page Application (SPA)?

Single page application (SPA) is a web application that implemented in a single page.Your code (JS, HTML, CSS) is retrieved with a single page load. And navigation between pages is performed without refreshing the whole page.

9)Explain ng-init directive.

‘ng-init’ is initiating directive for an application . Variable are initialized at that time.

<div ng-app="" ng-init="Age='20'">

</div>

10)Explain orderby filter.

AngularJS allow Filters to format data . There are several type of filter , that can be used in AngularJS . Following are the list of filter inbuilt in the AngularJS .A filter can be customised also.

Currency : Number is formatted to currency .

Date : Date is formatted to specific format.

Filter : Select a part of items from an array.

Json : object is formatted to JSON string .

LimitTo : Limits an array / string, into a given number of limit.

Lowercase : String is formatted to lower case .

Number : Number is formatted to string .

OrderBy : Orders an array by an expression.

Uppercase : Format string to upper case.

Here is the list of orderBy

{{obj}}

11)Explain ng-click directive.

Handle click event.

<button ng-click="count = count + 1">

Click Me!</button></br>{{count}}

</div>

</html>

12)What is factory method?

AngularJS allow to create Custom Services.There are two ways to create a service

• service method
• factory method
  

factory method
By this method , we have to define factory first and then assign method in it.

app.factory('myServices', function ()

{

var factory = {};

factory.factorial = function (num) {

var rval = 1;

for (var i = 2; i <= num; i++)

rval = rval * i;

return rval

}

13)What is a directive andwhat are the different types of Directive?

AngularJS allow you to extend HTML with new attribute call Directive. AngularJS support two type of  directives , inbuilt and custom . Several number of inbuilt directive are in the AngularJs,  custom directive also can be design in AngularJS.

Some Inbuilt Directives
ng-app	ng-bind	ng-bind-template
ng-change	ng-checked	ng-class
ng-[dbl]click	ng-cloak	ng-controller
ng-disabled	ng-hide	ng-show
ng-href	ng-include	ng-init
ng-model	ng-mousedown	ng-mouseenter
ng-mouseleave	ng-mousemove	ng-mouseover

14)How to make an ajax call using AngularJS?

AngularJS use $http service for reading data from remote servers.

<!DOCTYPE html>

<html lang="en">

<head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

</head>

<body ng-app="myapp">

<div ng-controller="myCtrl">

{{myWelcome}}

</div>

<script>

app.controller('myCtrl', function ($scope, $http) {

$http.get("Your url link")

.then(function (response) {

$scope.myWelcome = response.data;

});

});

</script>

</body>

</html>

15)What is $scope.$apply and $scope.$digest method ?

$apply():$apply() function is used to execute expressions in DOM area. $apply() function forcefully finishes execution and   it will call $digest() function to update all data bindings.

$digest() : Any changes made in $watch() variable ,$digest()  function call corresponding event listener functions  and update those values in view with new values.$digest() iterates through all the watches and checks any value updated.

16)How do you reset a “$timeout”, and disable a “$watch()”?

The $timeout service similar to window.setTimeout function in javascript.

<!DOCTYPE html>

<html lang="en">

<head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

</head>

<body ng-app="myapp">

<div ng-controller="myCtrl">

{{myHeader}}

</div>

<script>

var app = angular.module('myapp', []);

app.controller('myCtrl', function ($scope, $timeout) {

$scope.myHeader = 0;

$timeout(function () {

$scope.myHeader = $scope.myHeader + 1;

}, 500);

});

</script>

</body>

</html>

$watch() : $watch function watch the changes of variable in the $scope object.$watch function is attached with all $scope variable .Changes made in this variable update binding .The $watch() function is also used for custom watch for any events.

17)What is $rootScope and how does it relate to $scope?

In AngularJS each view have its own scope .The variable associate with a view are separate , one view can not access the variable of others view.

<!DOCTYPE html>

<html lang="en">

<head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

</head>

<body ng-app="myapp">

<div ng-controller="myController1">

{{data.Cntrl1}}

</div>

<div ng-controller="myController2">

{{data.Cntrl2}}

</div>

<script>

var module = angular.module("myapp", []);

var myController1 = module.controller("myController1", function ($scope) {

        $scope.data = { Cntrl1: "Controller 1" 

        };

});

var myController2 = module.controller("myController2", function ($scope) {

        $scope.data = { Cntrl2: "Controller 1" };

});

</script>

</body>

</html>

The $rootScope is the parent of all scope. An application can have only one $rootScope which will be shared among all the components of an application. Hence it like a global variable. All other $scopes are children of the $rootScope. Here is the example

$rootScope
app.module('myApp', []).controller('myController1', function ($scope, $rootScope)
{
}