Angular JS interview questions and answers

Angular JS interview questions and answers

1. Explain data binding in AngularJS.

According to AngularJS.org, “Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.”

There are two ways of data binding:

1. Data mining in classical template systems

2. Data binding in angular templates

2. Name the key features of AngularJS?

The key features of AngularJS are:

Scope

Controller

Model

View

Services

Data Binding

Directives

Filters

Testable

3. What are directives in AngularJS?

A core feature of AngularJS, directives are attributes that allow you to  invent new HTML syntax, specific to your application.  They are essentially functions  that execute when the Angular compiler finds them in the DOM.   Some of the most commonly used directives are ng-app,ng-controller and ng-repeat.

The different types of directives are:

Element directives

Attribute directives

CSS class directives

Comment directives

4. What are Controllers in AngularJS?

Controllers are Javascript functions which provide data and logic to HTML UI. As the name suggests, they control how data flows from the server to HTML UI.

5. What is Angular Expression? How do you differentiate between Angular expressions and JavaScript expressions?

Angular expressions are code snippets that are usually placed in binding such as {{ expression }} similar to  JavaScript.

The main differences between Angular expressions and JavaScript expressions are:

Context :  The expressions are evaluated against a scope object in Angular, while Javascript expressions are evaluated against the global window

Forgiving:  In Angular expression, the evaluation is forgiving to null and undefined whereas in JavaScript undefined properties generate TypeError or ReferenceError

No Control Flow Statements:  We cannot use loops, conditionals or exceptions in an Angular expression

Filters:  In Angular unlike JavaScript, we can use filters to format data before displaying it

6. What is the difference between link and compile in Angular.js?

Compile function is used for template DOM Manipulation and to collect all the directives.

Link function is used for registering DOM listeners as well as instance DOM manipulation and is executed once the template has been cloned.

7. What are the characteristics of ‘Scope’?

Scope  is an object that refers to the application model. It is an execution context for  expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch  expressions  and propagate events. The characteristics of Scope are:

Scopes provide APIs ($watch) to observe model mutations.

Scopes provide APIs ($apply) to propagate any model changes through the system into the view from outside of the “Angular realm” (controllers, services, Angular event handlers).

Scopes can be nested to limit access to the properties of application components while providing access to shared model properties. Nested scopes are either “child scopes” or “isolate scopes”. A “child scope” (prototypically) inherits properties from its parent scope. An “isolate scope” does not. See  isolated scopes  for more information.

Scopes provide context against which  expressions  are evaluated. For example  {{username}}  expression is meaningless, unless it is evaluated against a specific scope which defines the  username  property.

8. What are the advantages of using Angular.js framework?

Angular.js framework has the following advantages:

Supports two way data-binding

Supports MVC pattern

Support static template and angular template

Can add custom directive

Supports REST full services

Supports form validations

Support both client and server communication

Support dependency injection

Applying Animations

Event Handlers

9. What is the difference between AngularJS and backbone.js?

AngularJS combines the functionalities of most third  party libraries and supports individual functionalities required to develop HTML5 Apps.  While Backbone.js does these jobs individually.

10.  Explain what is injector in AngularJS?

An injector is a service locator, used to retrieve object instance as defined by  provider, instantiate types, invoke methods, and load modules.

11. What is factory method in AngularJS?

Factory method is used for creating a directive.  It is invoked when the compiler matches the directive for the first time. We can invoke the factory method using $injector.invoke.

Syntax:  module.factory( ‘factoryName’, function );
Result: When declaring factoryName as an injectable argument you will be provided with  the value that is returned by invoking the function reference passed to module.factory.

12.  What is ng-app, ng-init and ng-model?

ng-app  : Initializes application.

ng-model  : Binds HTML controls to application data.

ng-Controller  : Attaches a controller class to view.

ng-repeat  : Bind repeated data HTML elements. Its like a for loop.

ng-if  : Bind HTML elements with condition.

ng-show  : Used to show the HTML elements.

ng-hide  : Used to hide the HTML elements.

ng-class  : Used to assign CSS class.

ng-src  : Used to pass the URL image etc.

13. Does Angular use the jQuery library?

Yes, Angular can use jQuery if it’s present in the app when the application is being bootstrapped. If jQuery is not present in the script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.

14.  Can AngularJS have multiple ng-app directives in a single page?

No.  Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. If another  ng-app  directive has been placed then it will not be processed by AngularJS and we will need to manually bootstrap the second app, instead of using second  ng-app  directive.

15.  Can angular applications (ng-app) be nested within each other?

No. AngularJS applications cannot be nested within each other.

16.  What is internationalization  and how to  implement it  in AngularJS?

Internationalization is a way in which you can show locale specific information on a website.  AngularJS supports inbuilt internationalization for three types of filters: currency, date and numbers. To implement internalization, we only need to incorporate corresponding js according to locale of the country. By default it handles the locale of the browser.

17.  On which types of component can we create a custom directive?

AngularJS provides support to create custom directives for the following:

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.

18.  What is $rootscope in AngularJS?

Every application has a single root  scope. All other scopes are descendant scopes of the root scope. Scopes provide separation between the model and the view, via a mechanism for watching the model for changes. They also provide event emission/broadcast and subscription facility.

19. Can we have nested controllers in AngularJS?

Yes, we can create nested controllers in AngularJS. Nested controllers are defined in hierarchical manner while using in View.

20.  What is bootstrapping in AngularJS?

Bootstrapping in AngularJS is nothing but initializing, or starting the Angular app. AngularJS supports automatic and manual bootstrapping.

Automatic Bootstrapping: this is done by  adding ng-app directive to the root of the application, typically on the tag or tag if you want angular to bootstrap your application automatically. When angularJS finds ng-app directive, it loads the module associated with it and then compiles the DOM.

Manual Bootstrapping:  Manual bootstrapping provides you more control on how and when to initialize your angular App. It is useful where you want to perform any other operation before Angular wakes up and compile the page.

21.  What does SPA (Single Page Application) mean?  How can we implement SPA with Angular?

Single Page Applications (SPAs) are web apps that load a single HTML page and dynamically update that page as the user interacts with the app. In an SPA the page never reloads, though parts of the page may refresh. This reduces the round trips to the server to a minimum.

Itfs a concept where we create a single shell page or master page and load the webpages inside that master page instead of loading pages from the server by doing post backs. We can implement SPA with Angular using Angular routes. You can read up about SPAs  here.

22.  Why AngularJS?

AngularJS lets us extend HTML vocabulary for our application resulting in an expressive, readable, and quick to develop environment  . Some of the advantages are:

    MVC implementation is done right.

    It extends HTML using directives, expression and data binding techniques to define a powerful HTML template.

    Two way data-binding, form validations, routing supports, inbuilt services.

    REST friendly.

    Dependency injection support.

    It helps you to structure and test your JavaScript code.

23. Is AngularJS compatible with all browsers?

Yes AngularJS is compatible with the following browsers: Safari, Chrome, Firefox, Opera 15, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari).

24. How to implement routing in AngularJS?

It is a five-step process:

Step 1: – Add the “Angular-route.js” file to your view.

Step 2: – Inject “ngroute” functionality while creating Angular app object.

Step 3: – Configure the route provider.

Step 4: – Define hyperlinks.

Step 5: – Define sections where to load the view.

25. Explain $q service, deferred and promises.

Promisesf are post processing logics which are executed after some operation/action is completed whereas edeferredf is used to control how and when those promise logics will execute.

We can think about promises as “WHAT” we want to fire after an operation is completed while deferred controls “WHEN” and “HOW” those promises will execute.

$qh is the angular service which provides promises and deferred functionality.

26.Main features of Angular JS

AngularJS is an open-source JavaScript framework developed by Google. It is a structural framework for dynamic Web apps. It is easy to update and get information from your HTML document. It helps in writing a proper maintainable architecture, that can be tested with a client-side code.

The framework design is developed on MVC (Model-View-Controller)

Full-featured SPA (Single Page Application) framework is provided.

Dependency Injection is supported.

Two-way data binding is supported.

provides routing features.

Robust tests can be performed.

27.What is AngularJS?

AngularJS is a framework used for creating single web page applications in javascript.  It allows using HTML as the template language that enables to extend HTML’s syntax to express the components of the application clearly.

28. Explain what are the key features of AngularJS?

The key features of AngularJS are

Scope

Controller

View

Model

Services

Data Binding

Directives

Testable

Filters

29.Explain what is scope in AngularJS?

The application model is referred as scope, which acts between application controller and the view, in order to connect them.  Scopes can watch expressions and propagate events and are arranged in the hierarchical structure which can also impersonate the Document Object Model(DOM) structure of the application.

30.Explain what is services in AngularJS?

The services in AngularJS are the singleton objects or functions, used for carrying out specific tasks.  Angular JS holds business logic and these functions are known as controllers, directive, filters and so on.

31. Is AngularJS a framework, library or a plugin?

AngularJS is open source client-side MVC framework for creating dynamic web applications.

32. Explain what are directives? Mention some of the most commonly used directives in AngularJS application?

Anything that introduces new syntax, are called directives. They are like markers on the Document Object Model(DOM) element that incorporates a special behaviour to it.Directives are the most important components in AngularJS application. Some of the commonly used directives are ng-model, ng-bind, ng-repeat ng-App, ng-show etc.

33.What is string interpolation in Angular.js?

Using interpolate service, the compiler matches the text and attributes in the compilation process in order to check the embedded expressions. These expressions are updated and registered as watches, as a part of the normal digest cycle.

34. Explain what is the injector?

An injector is a service locator as defined by a provider, instantiate types, invoke methods and load modules. The injector is used to retrieve object instances. The single injector present per  Angular application helps to look up an object instance by its name.

35.Explain what is a factory method in AngularJS?

The factory method is used for creating the directive.  When compiler matches the directive for the first time, the factory method is invoked once. The factory method is invoked using $injector.invoke.

36.Who created Angular JS?

Initially, Angular JS was developed by Misko Hevery and Adam Abrons and later developed by Google.

37. Explain the concept of scope hierarchy?  How many scopes can an application have?

Each angular application consists of a root scope,but can have several child scopes. The application can have multiple scopes as child controllers and directives create new child scopes. When new scopes are created they are added as children of their parent scope, they also create a hierarchical structure similar to DOM.

38. Explain what is the difference between AngularJS and backbone.js?

AngularJS combines the functionalities of most of the third party libraries and supports individual functionalities that are required to develop HTML5 Apps.

Backbone.js acts individually.

39.How to make an ajax call using Angular JS?

To make ajax call, AngularJS provides ‘$http’ control which provides the service to read data from the server. A database call initiates the server to fetch the desired records. Once the data is ready, $http can be used to get the data from the server in the following manner:

functionstudentController($scope,$http){

varurl=”data.txt”;

$http.get(url).success(function(response){

$scope.students= response;

});

}

40.What is the use of $routeProvider in AngularJS? What is $rootScope?

$routeProvider is the key service which sets the configuration of URLs, attaches a controller with the same and maps them to the corresponding HTML page or ng-template,

The scope is a special JavaScript object, that contains the model data. The role of joining the controller with the views is done by scope. Model data is accessed via $scope object In controllers. $rootScope is the parent of all of the scope variables.

41. How to add routing?

var app = angular.module(“AngularApp”, [‘ngRoute’]);

app.config([‘$routeProvider’,

function($routeProvider)

{

$routeProvider.

when(‘/page1’,

{

templateUrl: ‘Modules/Page1/page1.html’,

controller: ‘Page1Controller’

})

.

when(‘/page2’,

{

templateUrl: ‘Modules/Page2/page2.html’,

controller: ‘Page2Controller’

})

.

otherwise

({

redirectTo: ‘/page1’

});

}

]);

42.What is directive and  what are the different types of Directives?

A behaviour or function is triggered during compilation process when specific HTML constructs are encountered, this function is called as the directive. It is executed when the compiler encounters it in the DOM.

Different types of directives are:-

Element directives

Attribute directives

CSS class directives

Comment directives

June 23, 2018

0 Responses on Angular JS interview questions and answers"

top
ETLHIVE is a Trademark of Itelligence Infotech Pvt Ltd.   *PMP®, PMBOK, PMI, PgMP, CAPM, PMI-RMP, and PMI-ACP are registered trademarks of the Project Management Institute, Inc. *ITIL®, IT Infrastructure Library, Swirl Logo, Prince2 are registered trademarks of AXELOS Limited.
21st July- Demo Session - P.Saudagar - Hadoop : 2.00 pm | Data science : 2 pm | Abinitio : 11 am | Informatica : 1.30 pm | Java : 9 am | Selenium : 9 am | Angular JS : 5 pm | Mean Stack : 5 pm| Nal Stop - Hadoop : 5.30 pm | Python : 11 am | Kharadi - Hadoop : 12 pm | Angular JS : 2.15 pm | Python : 11.30 am | Tableau 4.30 pm | Angular JS : 4.30 pm | Vashi(Mumbai) : Hadoop : 11 am | Data Science : 1 pm | Java : 4 pm | Blockchain : 4 pm