Ques. 1): What is Angular JS ?
Answer:
AngularJS is a JavaScript framework that is used for making rich,
extensible web applications. It runs on plain JavaScript and HTML, so you don’t
need any other dependencies to make it work.AngularJS is perfect for Single
Page Applications (SPA). It is basically used for binding JavaScript objects
with HTML UI elements.AngularJS handle a single event, observable is a stream
that allows passing of more than one event. A callback is made for each event
in an observable.
AJAX interview Questions and
Answers
Ques. 2): What are the advantages of the AngularJS framework?
Answer:
The AngularJS framework offers many advantages for web development
like:
• It
supports MVC pattern
• It
supports animations along with client-server communication
• It
provides two-way data binding that is not possible in other cases.
• It
supports angular and static template
• It
supports dependency injection
• It
supports full rest services
• It
applies animations
• It
offers to add custom directives
• It
supports event Handlers
JavaScript Interview Questions and Answers
Ques. 3): Please explain the difference between Angular and
AngularJS?
Answer:
The differences between Angular and AngularJS are stated as
follows:
• Architecture -
AngularJS supports the MVC design model. Angular relies on components and
directives instead
• Dependency
Injection (DI) - Angular supports a hierarchical Dependency Injection
with unidirectional tree-based change detection. AngularJS doesn’t support DI
• Expression
Syntax - In AngularJS, a specific ng directive is required for the
image or property and an event. Angular, on the other hand, use () and [] for
blinding an event and accomplishing property binding, respectively
• Mobile
Support - AngularJS doesn’t have mobile support while Angular does
have
• Recommended
Language - While JavaScript is the recommended language for AngularJS,
TypeScript is the recommended language for Angular
• Routing -
For routing, AngularJS uses $routeprovider. when() whereas Angular uses
@RouteConfig{(…)}
• Speed -
The development effort and time are reduced significantly thanks to support for
two-way data binding in AngularJS. Nonetheless, Angular is faster thanks to
upgraded features
• Structure -
With a simplified structure, Angular makes the development and maintenance of
large applications easier. Comparatively, AngularJS has a less manageable
structure
• Support -
No official support or updates are available for the AngularJS. On the
contrary, Angular has active support with updates rolling out every now and
then
Node.js Interview Questions and Answers
Ques. 4): What is the Template, scope and controller in AngularJS
?
Answer:
Template: The template is the HTML portion of the angular app. It is
exactly like a static HTML page, except that templates contain additional
syntax which allows data to be injected in it in order to provide a customized
user experience.
Scope: The scope is the object that represents the “model” of your
application. It contains fields that store data which is presented to the user
via the template, as well as functions which can be called when the user
performs certain actions such as clicking a button.
Controller: 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.
JQuery Interview Questions and Answers
Ques. 5): Could we make an angular application to render on the
server-side?
Answer:
Yes, we can, with Angular Universal, a technology provided by
Angular capable of rendering applications on the server-side.
The benefits of using Angular Universal are:
• Better
User Experience: Allows users to see the view of the application
instantly.
• Better
SEO: Universal ensures that the content is available on every search
engine leading to better SEO.
• Loads
Faster: Render pages are available to the browsers sooner, so the
server-side application loads faster.
Advance Java interview Questions and Answers
Ques. 6): How do you share data between controllers in AngularJs?
Answer:
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
Ques. 7): Difference between SessionStorage, Cookies, and
LocalStorage
Answer:
SessionStorage: In session storage, data stored in a specific session, and
it will be lost in a case the browser tab closed for a particular time or
session. In session storage, it stores 5MB maximum size of data.
Cookies: Cookies help to store that data that needs to send back to
the server by request. The usage of cookies relies on the duration and typeset
from either the client-side or the server size. In cookies, it stores 4MB, the
maximum size of data.
LocalStorage: In local storage, there is no expiration date for storing of
data. In this case, it is possible to clear the data only either with
JavaScript or the browser cache. In local storage, it stores the maximum size
of data as compared to session storage and cookies.
Ques. 8): Explain Dependency Injection?
Answer:
Dependency injection is an application design pattern that is
implemented by Angular and forms the core concepts of Angular.
Let us understand in a detailed manner. Dependencies in Angular
are services which have a functionality. Various components and directives in
an application can need these functionalities of the service. Angular provides
a smooth mechanism by which these dependencies are injected into components and
directives.
Ques. 9): What is the SPA (Single page application) in AngularJs?
Answer:
Single page application is a web application that used to load a
single HTML page. It also helps to update the page to make the users connect
with the application. With the help of HTML and AJAX, it is possible by the SPA
to create responsively, and fluid web app without entertaining invariant page
reloads. In this way, one can able to make responsive UI without taking the
assistance of page flicker.
Ques. 10): Difference between AngularJS and JavaScript
Expressions?
Answer:
Below are some major difference between AngularJS and JavaScript
Expressions
• Both
can contain literals, operators, and variables.
• AngularJS
expressions can be written in HTML but JavaScript expressions are not.
• AngularJS
expressions do not support conditionals, loops, and exceptions, while
JavaScript expressions do.
• AngularJS
expressions support filters, while JavaScript expressions do not.
Ques. 11): What is the AOT (Ahead-Of-Time) Compilation? What are
its advantages?
Answer:
An angular application consists of components and templates which
a browser cannot understand. Therefore, every Angular application needs to be
compiled before running inside the browser. The Angular compiler takes in the
JS code, compiles it, and then produces some JS code. It is known as AOT
compilation and happens only once per occasion per user.
There are two kinds of compilation that Angular provides:
JIT(Just-in-Time) compilation: the application compiles inside the
browser during runtime
AOT(Ahead-of-Time) compilation: the application compiles during
the build time.
Advantages of AOT compilation:
• Fast
Rendering: The browser loads the executable code and renders it immediately
as the application is compiled before running inside the browser.
• Fewer
Ajax Requests: The compiler sends the external HTML and CSS files along
with the application, eliminating AJAX requests for those source files.
• Minimizing
Errors: Easy to detect and handle errors during the building phase.
• Better
Security: Before an application runs inside the browser, the AOT compiler
adds HTML and templates into the JS files, so there are no extra HTML files to
be read, thus providing better security for the application.
Ques. 12): What is the ng-App directive in AngularJs?
Answer:
The ng-App directive in AngularJs is used to specify the AngularJs
Application. It is used to call the root element of an AngularJs app. Also, it
can be stored near <body> or <html> tag. It is possible to show any
number of ng-app directives in the HTML document. However, it is possible to
bootstrap only one application automatically. Moreover, the other applications
are needed to bootstrap manually.
For Example:
//<div ng-app=””>
<p>My first expression: {{178 + 133}} </p>
</div>//
Ques. 13): What is the difference between one-way binding and
two-way binding in AngularJS ?
Answer:
In One-Way data binding, view (UI part) not updates automatically
when data model changed. We need to write custom code to make it updated every
time.
ng-bind has one-way data binding.
While in two way binding scope variable will change it’s value
every time its data model changed is assigned to a different value.
Ques. 14): Explain Angular Authentication and Authorization.
Answer:
The user login credentials are passed to an authenticate API,
which is present on the server. Post server-side validation of the credentials,
a JWT (JSON Web Token) is returned. The JWT has information or attributes
regarding the current user. The user is then identified with the given JWT.
This is called authentication.
Post logging-in successfully, different users have a different
level of access. While some may access everything, access for others might be
restricted to only some resources. The level of access is authorization.
Ques. 15): What is dependency injection In AngularJs and how does
it work?
Answer:
AngularJS was designed to highlight the power of dependency
injection, a software design pattern that places an emphasis on giving
components of their dependencies instead of hardcoding them within the
component. For example, if you had a controller that needed to access a list of
customers, you would store the actual list of customers in a service that can
be injected into the controller instead of hardcoding the list of customers
into the code of the controller itself. In AngularJS you can inject values,
factories, services, providers, and constants.
Ques. 16): How to enable HTML5 mode in Angular 1.x?
Answer:
html5Mode method of $locationProvider module is used to enable
HTML5 mode in Angular 1.x. For creating pretty URLs and removing # from URLs
html5Mode need to true.
Enabling html5Mode to true in Angular 1.x.
angular.module('myApp', [])
.config(function($routeProvider,
$locationProvider) {
$routeProvider
.when('/',
{
templateUrl
: 'partials/home.html',
controller
: mainController
})
// use the HTML5
History API
$locationProvider.html5Mode(true);
});
Ques. 17): How to access parent scope from child controller in
AngularJS ?
Answer:
In angular there is a scope variable called $parent (i.e.
$scope.$parent). $parent is used to access parent scope from child controller
in Angular JS.
Example:
<div ng-controller="ParentCtrl">
<h1>{{ name }}</h1>
<p>{{ address }}</p>
<div
ng-controller="ChildCtrl">
<h1>{{ title
}}</h1>
<input
type="text" ng-model="$parent.address" />
</div>
Ques. 18): Explain all the steps to configure an Angular App
(ng-app)
Answer:
There are specific points that need to consider to configure an
Angular app:
• First
of all, the Angular module should be created
• Then,
a controller is assigned to the module
• After
that, the module is get linked with the HTML template by the assistance of the
Angular App.
• Finally,
the HTML template will get linked to the controller with an ng-controller
directive.
Ques. 19): What is a Mocked Service in AngularJs? How to use it?
Answer:
It is the most common type of dependency on AngularJS application.
A service can be mocked in two ways by either getting an instance of actual
service using an inject block or by implementing a mock service using $provide.
Ques. 20): What do you mean by ng-include and ng-click directives
in AngularJs?
Answer:
The term ng-include is needed to add distinct files on the main
page while the ng-include directive adds HTML from an external file. The added
content will be considered as child nodes of the particular element. Moreover,
the added file should be placed on the similar domain like the document such as
<div ng-include=”‘myFile.htm'”></div>. Moreover, ng-click is used
in the case when we need to click on a bottom or when there is a need to
perform an operation. The main purpose of it conveys AngularJs how to behave in
case an HTML element is clicked. For example: //<button ng-click=”count =
count + 1″ ng-init=”count=0″>OK</button>//
The above-written code is used for hiking up the count variable by
1 when the button gets clicked.