Angular JS interview question set 1/Angular JS Interview Questions and Answers for Freshers & Experienced

What is the factory function in AngularJS?

For creating the directive, factory method is used. It is invoked only once when the compiler matches the directive for the first time. By using $injector.invoke the factory method is invoked.

How are AngularJS prefixes $ and $$ used?

$$ variable in AngularJS is used as a private variable, as it is used to prevent accidental code collision with the user code.

Whereas, $ prefix can be used to denote angular core functionalities (like a variable, parameter, property or method).

Explain injector in AngularJS

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

Explain the linking function and its types

Link combines the directives with a scope and produces a live view. For registering DOM listeners as well as for updating the DOM, link function is responsible. After the template is cloned, it is executed.

Pre-linking function: Pre-linking function is executed before the child elements are linked. It is not considered as a safe way for DOM transformation.

Post linking function: Post linking function is executed after the child elements are linked. It is safe to do DOM transformation by post-linking function

Explain the differences between one-way binding and two-way binding.

One-way binding is used to bind the data from the model to view without updating the HTML template or view automatically.

Thus, in order to update the HTML template, we need to write a custom code that will update the view every time whenever a data is binded from model to view.

Whereas, two-way binding is used to bind the data from the model to view and vice versa(i.e view to model) by automatically updating the HTML template without writing any custom code.

What is the digest cycle in AngularJs?

It is a part of the process of data binding in AngularJS. It compares the old and new versions of the scope model value in each digest cycle.

The digest cycle is triggered automatically. We can also enhance the usability by using $apply () if we want to trigger the digest cycle manually.

Explain directives and their types

During compilation process, when specific HTML function is triggered, it is referred to as directive. It is executed when the compiler encounters it in the DOM.

Different types of directives are:

1) Element directives

2) Attribute directives

3) CSS class directives

4) Comment directives.

What is string interpolation in Angular.JS ?

In Angular.js, the compiler during the compilation process matches text and attributes. It uses interpolate service to see if they contain embedded expressions. As part of the normal digest cycle, these expressions are updated and registered as watches.

Difference between JavaScript and ECMAScript?

Javascript: It is a programming language which is designed for web pages. Developed by Netscape and Sun, it is used to enhance web page s with interactive and dynamic features.

ECMAScript: It is an abbreviated form of European Computer Manufacturer’s Association which is mainly used in scripting languages like JavaScript, Jscript etc.

Explain Eager loading in Angular

There are 3 types of loading – eager loading, lazy loading and preloading. Eager loading is the module format which has to import into the Angular 4 application by introducing the metadata of @ngmodule decorator. It is helpful for small size angular applications.

What is the controller in AngularJS ?

The controller is a function which generally takes an empty scope object as a parameter and adds to it the fields and functions that will be later exposed to the user via the view.

What are the different types of component decorators in Angular 4?

There are basically 4 types of component decorators in Angular 4:

Class Decorators

1. Parameter Decorators: used for parameters inside the class constructors

2. Property decorators: used for properties inside classes

3. Method Decorators: used for methods inside classes

Describe the use of TypeScript in Angular 4?

It is a native language for Angular 4 Development. TypeScript has Design-tome support system for tooling and Type Safety. It is mainly a superset of JavaScript.

What is deep linking in Angular 4?

Deep Linking mainly takes a specific page directly without searching and traversing application from the landing page of the website. It will ultimately help in generating and getting indexes so that such specific links can easily be searched by search engines. In Angular 4, deep linking use # for supports.

Describe ElementRef in Angular 4?

ElementRef is a class used for abstraction. The Class structure mainly holds the native elements and ElementRef is used to access the native elements.

10) What is internationalization in Angularjs ?

Internationalization is a way to show locale-specific information on a website.It is used to create multilingual language websites.

How do you share data between controllers in AngularJs ?

We can share data by creating a service, Services are the easiest, fastest and cleaner way to share data between controllers in AngularJs.There are also other ways to share data between controllers, they are

Using Events
$parent, nextSibling, controllerAs
Using the $rootScope

Describe different types of binding in Angular 4?

The different kinds of binding in Angular 4 are Two Way Binding, Event Binding, and Property Binding. These data bindings are the important components of Angular. Event Binding is the process of updating values of a variable or attribute from the View Component layer to the Model Component Layer. Property Binding is the way of updating the values of a variable in Model Component and displaying it in the View Component. Two Way Binding is the combination of Property Binding and Event Binding features.

What is binding?

The binding process in Angular 4 is the process of establishing synchronization between the View and Model Components which are different layers in the application.

What is Unit Testing in Angular 4?

Private testing or unit testing is basically used to test the system’s components. It is the process to test small separate pieces of code. But when any unit testing depends on any of the external resources like networks, databases, and APIs, then it would not come under unit test.

How can we share the data between controllers in AngularJS?

First, we have to create a service. Service is used to share the data between controllers in AngularJS in a very lucid, easy and fastest way. We use events, $parent, next sibling, and controller by using a $rootScope.

Why to use AngularJS Global Object services?


The main reason that AngularJS includes these services is to make testing easier, but an important facet of unit testing is the need to isolate a small piece of code and test its behavior without testing the components it depends on—in essence, creating a focused test. The DOM API exposes functionality through global objects such as document and window.

These objects make it hard to isolate code for unit testing without also testing the way that the browser implements its global objects. Using services such as $document allows AngularJS code to be written without directly using the DOM API global objects and allows the use of AngularJS testing services to configure specific test scenarios.

What are the directive scopes in AngularJS?

Three directive scopes are available in AngularJS.
They are:

1. Parent scope: Whatever change you make in your directive that comes from the parent scope, will also reflect in the parent scope, and it is also a default scope.
2. Child scope: It is a nested scope that inherits a property from the parent scope. Also, if any properties and function on the scope are not connected with the parent scope directive, then a new child scope directive is created.
3. Isolated scope: It is reusable and is used when we build a self-contained directive. It is only used for private and internal use which means that it does not contain any properties of the parent scope.

What are the Angular Modules?

The angular modules collectively define an angular application where we can write the angular code. Modules contain the different parts of an angular application. A module is created by angular.module function in angular.

Write all the steps to configure an Angular App(ng-app).

To set up an Angular App we must follow certain steps as mentioned below:

1. angular.module will be created at first.
2. A controller will be assigned to the module.
3. The module will be linked with the HTML template(i.e. UI or View) with an angular app(ng-app).
4. The HTML template will be linked with the controller(i.e JS) with an ng-controller directive.

What is Controller?

Controller is a JavaScript constructor function which controls the data. I am not going to cover what are the types of functions in this article but let me give some brief information about constructor function. In constructor function when we call that function that function creates a new object each time.

How can digest cycle time be decreased?

Digest cycle time can be decreased by decreasing the number of watchers. To do this, you can:

Use web worker
Work in batches
Cache DOM
Remove unnecessary watchers
Use one-time Angular binding

How can a SPA be implemented in AngularJS?

SPA can be implemented with Angular by using Angular routes.

What is a Single Page Application (SPA)?

SPA is the concept whereby pages are loaded from the server not by doing postbacks, instead of by creating a single shell page or master page and loading the web pages into the master page.

What are the benefits of dependency injection?

Dependency injection has two significant benefits: Testing and decoupling.

What is dependency injection?

Dependency injection is the process where the dependent objects are injected rather than being created by the consumer.

Explain e2e testing of AngularJS applications.

End-to-end (e2e) testing involves testing an application from start to finish to determine whether all the components are working correctly. It catches issues within an application related to integration and flow.

What is Module ?

Let me explain why module is required in AngularJS. In .NET console application there is a main method and what main method does is, it’s an entry point of application. It is the same as angular module and is an entry point. Using module we can decide how the AngularJS application should be bootstrapped.

Explain what the link function is and how it differs from compile.

The link function combines the directives with a scope to produce a live view.
The link function is responsible for instance DOM manipulation and for registering DOM listeners.
The compile function is responsible for template DOM manipulation as well as the collection of all the directives.

Explain what a digest cycle is in AngularJS.

During every digest cycle, all new scope model values are compared against the previous values. This is called dirty checking. If change is detected, watches set on the new model are fired, and another digest cycle executes. This goes on until all models are stable.

The digest cycle is triggered automatically, but it can be called manually using “.$apply().”

In what ways can you use a directive?

You can use a directive as an element, attribute, or class name. To define the way your directive will be used, you need to set the restrict option in the directive declaration. The restrict option can be set to:

‘A’ - Only matches attribute name
‘C’ - Only matches class name
‘E’ – Only matches element name

You can combine these restrictions to produce needed results.

Distinguish between AngularJS and JavaScript expressions.

There are several differences between AngularJS and JavaScript expressions:

1. ) We can write AngularJS expressions in HTML, but we cannot write JavaScript expressions in HTML.
2. )We cannot use conditional iterations, loops, and exceptions in AngularJS, but we can use all of these conditional properties in JavaScript expressions.
3.) Filters are supported in AngularJS whereas filters are not supported in JavaScript.

What are directives?

Directives are unique markers on a DOM element that tell the HTML compiler to attach a specified behavior to the DOM element. Directives start with ng-prefix. Some of the built-in directives include ngClass, ngApp, ngRepeat, ngModel, ngBind and ngInit.

What is data binding in AngularJS and What is the difference between one-way and two-way binding?

Data binding is the automatic attunement of data between the view and model components. AngularJS uses two-way data binding. In one-way binding, the scope variable in the HTML is set to the first value that its model is assigned to.

In two-way binding, the scope variable changes its value every time its model binds to a different value.

Explain the concept of scope hierarchy.

Each AngularJS application has only one root scope. Child controllers, however, create scope for each view. When the new scopes are created, they are added to their parent root scope as child scopes. This creates a hierarchical structure when they are attached.

What is the main thing that you would need to change if you were migrating from AngularJS 1.4 to AngularJS 1.5?

To adapt to the new AngularJS 1.5 components, you would need to change .directive to .component.

Explain what is Dependency Injection in AngularJS?

Dependency Injection is one of the best features of AngularJS. It is a software design pattern in which objects are passed as dependencies. It helps us to remove hard coded dependencies and makes dependencies configurable. Using Dependency Injection, we can make components maintainable, reusable and testable.

Dependency Injection is required for the following
1) Separating the process of creation and consumption of dependencies.
2) It allows us to create independent development of the dependencies.
3) We can change the dependencies when required.
4) It allows injecting mock objects as dependencies for testing.

AngularJS uses dependency with several types
1. Value
2. Factory
3. Service
4. Provider
5. Constant

How to use Currency Filter in AngularJS

There are two ways by which we can use Currency Filter.
Default

If we did not provide any currency symbol then by default Dollar-Sign will be used; we can use it as follows:

<!-- by default -->

Default Currency {{amount | currency}}

User Defined

To use different type of currency symbols we have to define our own symbol by using the unicode or Hexa-Decimal code of that Currency.

E.g. - For Example If we want to define Indian Currency Symbol then we have to use (Unicode-value) or (Hexa-Decimal value)
Indian Currency {{amount | currency:"&# 8377"}}

What is currency filter in AngularJS

One of the filters in AngularJS is the Currency Filter. This “currency” filter includes the “$” Dollar Symbol as the default. So we can use the following code as the html template format of Currency Filter.

What are expressions in AngularJS?

Expressions in AngularJS are just like JavaScript code snippets. JavaScript code is usually written inside double braces. {{expression}}. In other words, Angular Expressions are JavaScript code snippets with limited sub-set. Expressions are included in the HTML elements.

Like JavaScript expressions, AngularJS expressions can also have various valid expressions. We can use the operators between numbers and strings, literals, objects and arrarys inside the expression {{ }}. For example,
{{ 2 + 2 }} (numbers)
{{Name + " " + email}} (string)
{{ Country.Name }} (object)
{{ fact[4] }} (array)

<div ng-controller="appController">
<span>
4+5 = {{4+5}}
</span>
<br />
<br />
<span ng-init="quantity=5;cost=25">
Total Cost = {{quantity * cost}}
</span>
</div>

Define Data Binding.

Data binding is an automatic attunement of data between the view and model components.

Define the features of AngularJS.

The features include:

1) The Template (View)
2) The Scope (Model)
3) The Controller (Controller)
4) Services
5) Filters
6) Directives

Explain services in AngularJS

AngularJS services are the singleton objects or functions that are used for carrying out specific tasks. It holds some business logic.

Explain function scope in AngularJS

Scope refers to the application model. It acts like a glue between the application controller and the view. Scopes are arranged in a hierarchical structure and impersonate the DOM (Document Object Model) structure of the application. It can watch expressions and propagate events.

What is AngularJS?

AngularJS is a JavaScript framework used for creating single web page applications. It allows you to use HTML as your template language and enables you to extend HTML's syntax to express your application's components clearly.

Search
R4R Team
R4R provides Angular JS Freshers questions and answers (Angular JS Interview Questions and Answers) .The questions on R4R.in website is done by expert team! Mock Tests and Practice Papers for prepare yourself.. Mock Tests, Practice Papers,Angular JS interview question set 1,Angular JS Freshers & Experienced Interview Questions and Answers,Angular JS Objetive choice questions and answers,Angular JS Multiple choice questions and answers,Angular JS objective, Angular JS questions , Angular JS answers,Angular JS MCQs questions and answers Java, C ,C++, ASP, ASP.net C# ,Struts ,Questions & Answer, Struts2, Ajax, Hibernate, Swing ,JSP , Servlet, J2EE ,Core Java ,Stping, VC++, HTML, DHTML, JAVASCRIPT, VB ,CSS, interview ,questions, and answers, for,experienced, and fresher R4r provides Python,General knowledge(GK),Computer,PHP,SQL,Java,JSP,Android,CSS,Hibernate,Servlets,Spring etc Interview tips for Freshers and Experienced for Angular JS fresher interview questions ,Angular JS Experienced interview questions,Angular JS fresher interview questions and answers ,Angular JS Experienced interview questions and answers,tricky Angular JS queries for interview pdf,complex Angular JS for practice with answers,Angular JS for practice with answers You can search job and get offer latters by studing r4r.in .learn in easy ways .