Angularjs Interview Questions and Answers

1) What is Angular JS?

It is a client side framework <strong>(not a library)</strong> entirely written in JS. Angular JS is typically used to build single-page-application.

2) Why we really require Angular JS?

Many JS frameworks compel us to extend from custom Javascript objects and manipulate DOM. Hence, developer requires knowledge of the complete DOM & force complex logic into JS.<br/> Whereas angular auguments HTML to provide native mvc capabilities. Here the developer can encapsulates a portion of the page as one application instead of compelling as entire page to be an angular app. It encourages loose coupling between presentation, data and logic components.

3) What is the difference between framework and library?

The main difference is the IOC. When you call a method from a library, you are in control of the method. But with a framework, the control os inverted.The framework call you actually.<br/> A library is just a collection of class definitions to increase the code-reuse. But in framework, all the control flow is already there. There is a bunch of white spots that you should fill with your own code.

4) Give a comparison between jQuery and angular JS.

<strong>1.</strong> In case of jQuery, first design a page and then make it dynamic. i.e programmatically change the view but in case of angular, start with the architecture & finally design the view.<br/> <strong>2.</strong> In jQuery the DOM represents the model as selectors are used to find DOM elements and bind event handlers to them but in angular, a separate model layer independent of the view is present.

5) What is MVC in angular JS?

<strong> M stands for Model </strong> - Hols the data. It does not know about the view and controller.<br/> <strong> V stands for View</strong> - Displays stuffs. It only knows about the model.<br/> <strong> M stands for Controller</strong> - The logic resides in it. It knows about the view and model.

6) Explain about the directive ng-app in Angular JS?

ng-app attribute is set to an element of DOM. The only components that ere impacted by Angular are the DOM elements that are declared inside the element with ng-app attribute.

7) What are modules in Angular JS?

Modules are logical entities that an application can be divided into.An app can contain several modules. Each module can contain code for a specific functionality. e.g. <strong>angular.module("myApp", []);</strong> It accepts two parameters.<br/> <strong>1.</strong> Name of the module.<br/> <strong>2. </strong> List of dependencies

8) What is scope in Angular JS?

The $scope is a plain javascript object. It represents an object that holds the model data to pass the view. It can be treated as a local variable for a controller.

9) What is $rootScope in Angular JS?

The $rootScope is the eventual parent of all $scope objects. if the controller is nested, the $scope variables will do a lookup in prototypal manner. it is not recommended to attach a lot of logic to this global context.

10) List the features of controller in Angular JS

<strong>1.</strong>Controllers are JS functions that are bound to a particular scope.<br/> <strong>2.</strong>When a new controller is created on a page, Angular provides it a new $scope.<br/> <strong>3.</strong>This $scope can be used to setup the initial state of the scope of the controller.<br/> <strong>4.</strong> Angular permits view to call functions on the scope.<br/> <strong>5.</strong>It allows for the logic of a single view to be contined in a single container.

11) How do we achieve dependency injection in Angular JS?

myApp.controller("stateController", function($scope, <strong>$timeout</strong>){<br/> $scope.location.state = "...";<br/> $timeout(function(){<br/> $scope.location.state = "Karnataka";<br/> }, 3000);<br/> });<br/>The built-in $timeout service is injected into the function dynamically.

12) What is Filter in Angular JS?

Filter provides a mechanism to format the data to be displayed to the user. Filters are invoked in HTML using the <strong>|</strong> character inside template binding <strong>{{}}</strong>.<br/> <strong>{{location | uppercase}}</strong>

13) How to create a custom filter in Angular JS?

The temperature is {{25 | <strong>toFahrenheit</strong> }}.<br/> myApp.filter("toFahrenheit", function() {<br/> return function(input) {//it will execute for each elements.<br/> if(input) {<br/> // define the logic here and return result<br/> }<br/> }<br/> });

14) What is a directive?

A directive is a marker on a DOM element(attribute, element or CSS class) that tells AngularJS to attach a specofed behaviour to that element. It is just a function that can be run on a particular DOM element.<br/> <strong>.directive()</strong> method provided by Angular module API can be used to register new directives.

15) What are the different appearances of a directive?

An angular directive can be associated with the foollowing appearance.<br/> <strong>HTML element('E')</strong> e.g.- &lt;date-time&gt;&lt;/date-time &gt;<br/> <strong>attribute to an element('A')</strong> e.g. &lt;div date-time&gt;&lt;/div&gt;<br/> <strong>a class('C')</strong> e.g. - &lt;div class="date-time"&gt;&lt;/div&gt;<br/> These are achieved using <strong>restrict </strong>property while defining a directive.

16) What does replace property of a directive does?

The custom element can be removed from the generated DOM with the help of replace property with a value set to true.

17) What is DDO?

Angular allows to change the the default scope of directives by passing a configuration object called <strong>DDO(Directive Definition Object)</strong>. It is a javascript object used to configure the directive's behaviour.

18) What are the different types of scope of a directive?

There are 3 types of scope provided by a directive.<br/> <strong>scope: false</strong> : In this case directive uses its parent scope.<br/> <strong>scope: true</strong> :It defines a new scope and this new scope object is prototypically inherited from its parent scope.<br/> <strong>scope: {} </strong> : In this case directive gets a new isolated scope and it won't be inherited from the parent scope.

19) What are the types of binding options defined in isolated scope property?

There are 3 types of binding options defined as prefixes in scope property.<br/> <strong>@ - text-binding / one way binding </strong><br/> <strong>= - direct model -binding / two way binding</strong><br/> <strong>& - behaviour-binding / methd binding</strong>

20) What does the directive ng-include does?

It is used to fetch the and include an external HTML fragement into the current aplication. Here the URL of the template is restricted to the same domain and protocal as the application.

21) Explain different properties provided by angular for form validations.

<strong>$pristine : </strong>True if the form has not been changed, false if some fields have been changed.<br/> <strong>$dirty : </strong>False if the form has not been changed, true if it has.<br/> <strong>$valid : </strong>True if the form field(or all fields) is valid.<br/> <strong>$invalid : </strong> False if the field (or all fields) is valid, true otherwise.

22) What is the use of ng-form directive?

The purpose of ng-form is to group controls and not a replacement for the &lt;form&gt;. It is used when a form is to be nested within another. This is a requirement as <strong>name</strong> attribute of input elements can not be generated dynamically.

23) What is a service in Angular?

A service in Angular is a function or an object that is used to share data and/or behavior across controllers, directives etc. Services provide a mechanism to keep data around for the lifetime of the app. A service is lazy-­?loaded (created only when necessary)

24) What are the different options to create service?

The most common method for registering a service with the Angular app is through the factory() method<br/> The other approaches for creating services are:<br/> <strong>service()</strong><br/><strong>provider()</strong><br/><strong>constant()</strong>

Is this page helpful to you? Please give us your feedback below. We would love to hear your thoughts on these articles, it will help us improve further our learning process.