AngularJS

AngularJS Interview Questions

Pinterest LinkedIn Tumblr


IQ Stream Technologies
 is one of the top quality AngularJS online training provider with highly experienced and skilled professional trainers delivering advanced AngularJS Training (Open-Source JavaScript framework) with online practical lessons.

Question: What Are Advantages Of Using AngularJS Framework?
Some of the key advantages of using AngularJS framework are:
It provides an excellent experience to the end user.
It free’s the developers from having to register callbacks manually or write repetitive
low-level DOM manipulation tasks.
By separating DOM manipulation from app logic, it makes code modular and easy to
test.
It supports two-way data binding.

Question: What Are The Main Features Of AngularJS ?
Some of the most prominent feature of AngularJS are.
Data-binding – Handles synchronization of data across model, controllers, and view.
Scope – Object representing the model, acts as a glue layer between controller and view.
Controllers – JS functions bound to the scope object.
Services – Substitutable objects that are wired together using dependency injection. e.g.
$location service. 3/23
Filters – Formats the value of an expression for displaying to the user. e.g., uppercase,
lowercase.
Directives – These are extended HTML attributes start with the “ng-” prefix. e.g., ng-app
directive used to initialize the angular app.
Templates – HTML code including AngularJS specific elements and attributes.
Routing – It’s an approach to switch views.
MVC pattern – A design pattern made up of three parts.
Model – Represents data, could be static data from a JSON file or dynamic data from
a database.
View – Renders data for the user.
Controller – Gives control over the model and view for collating information to the
user.
Deep linking – Enables the encoding of the application state in the URL and vice versa.
Dependency injection – A design pattern to let the components injected into each other
as dependencies

Question: What Is A Digest Cycle 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()”.
Question: What Are Ways Of Communication Between Modules Of
Application, Using AngularJS Functionality?
The common ways of communication are:
Using events or services
By assigning models on $rootScope
Directly between controllers using ControllerAs and other forms of inheritance
Directly between controllers using $parent, $$childHead, $$nextSibling

Question: How Digest Cycle Can Be Decreased?
It 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

Question: Explain The Steps Involved In Boot Process For AngularJS?
Whenever a web page loads in the browser, following steps execute in the background.
First, the HTML file containing the code gets loaded into the browser. After that, the
JavaScript file mentioned in the HTML code gets loaded. It then creates a global
object for angular. Now, the JavaScript which displays the controller functions gets
executed.
In this step, AngularJS browses the complete HTML code to locate the views. If the
same is available, then Angular links it to the corresponding controller function.
In this step, AngularJS initiates the execution of required controller functions. Next, it
populates the views with data from the model identified by the controller. With this the
page is ready.

Question: Do AngularJS Provide Any Security Features?
AngularJS provides built-in protection from the following security flaws.
It prevents cross-site scripting attacks: Cross-site scripting is a technique where
anyone can send a request from client side and can get the confidential information
easily.
It prevents HTML injection attacks.
It prevents XSRF protection for server-side communication: “Auth token” mechanism
can handle it. When the user logins for the first time a user id and password is sent to
the server, and it will, in turn, return an auth token. Now, this token does the
authentication in the future transactions.

Question: How To Validate Data In AngularJS?
AngularJS enriches form filling and validation. We can use $dirty and $invalid flags to do
the validations in seamless way. Use novalidate with a form declaration to disable any
browser specific validation.
Following can be used to track error.
$dirty − states that value has been changed.
$invalid − states that value entered is invalid.
$error − states the exact error.

Question:
Scopes are controllers specific. If we define nested controllers then child controller will
inherit the scope of its parent controller.
var mainApp = angular.module(“mainApp”, []);
mainApp.controller(“shapeController”, function($scope) {
$scope.message = “In shape controller”;
$scope.type = “Shape”;
});
mainApp.controller(“circleController”, function($scope) {
$scope.message = “In circle controller”;
});

Question: What Is Provider?
provider is used by AngularJS internally to create services, factory etc. during config
phase(phase during which AngularJS bootstraps itself).
Below mention script can be used to create MathService that we’ve created earlier.
Provider is a special factory method with a method get() which is used to return the
value/service/factory.
//define a module
var mainApp = angular.module(“mainApp”, []);

//create a service using provider which defines a method square to return square of
a number.
mainApp.config(function($provide) {
$provide.provider(‘MathService’, function() {
this.$get = function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});

Question: What Are Filters? Explain Different Filters Provided By
AngularJS?
An AngularJS Filter changes or transforms the data before passing it to the view. These
Filters work in combination with AngularJS expressions or directives. AngularJS uses pipe
character (“|”) to add filters to the expressions or directives. For example:
6/23
<p> {{ bid | currency }} </p>
The above example is an expression enclosed in the curly braces. The filter used in this
expression is currency. Also important to note that filters are case-sensitive. AngularJS
provides following filters to transform data.
currency – It is used to format a number to a currency format.
date – It is required to format a date to a specified format.
filter – It chooses a subset of items from an array.
json – It formats an object to a JSON string.
limitTo – Its purpose is to create an array or string containing a specified number of
elements/characters.
The elements are selected, either from the beginning or the end of the source array or
string. This depends on the value and sign (positive or negative) of the limit.
lowercase – This filter converts a string to lower case.
number – It formats a number as text.
orderBy – It enables to sort an array. By default, sorting of strings happens alphabetically.
And sorting of numbers is done numerically.
It also supports a comparator function where we can define what will be counted as a
match or not.
uppercase – This filter converts a string to upper case

Question: What Are Compile, Pre, And Post Linking In AngularJS?
Compile – It collects an HTML string or DOM into a template and creates a template
function. It can then be used to link the scope and the template together.
AngularJS uses the compile function to change the original DOM before creating its
instance and before the creation of scope. Before discussing the Pre-Link and the Post-Link
functions let’s see the Link function in detail.
Link – It has the duty of linking the model to the available templates. AngularJS does the
data binding to the compiled templates using Link. Following is the Link syntax.
link: function LinkFn(scope, element, attr, ctrl){}
Where each of the four parameters is as followsScope – It is the scope of the directive. element – It is the DOM element where the directive
has to be applied.
attr- It is the Collection of attributes of the DOM element. 7/23
ctrl – It is the array of controllers required by the directive.
AngularJS allows setting the link property to an object also. The advantage of having an
object is that we can split the link function into two separate methods called, pre-link and
post-link.
Post-Link – Execution of Post-Link function starts after the linking of child elements. It is
safer to do DOM transformation during its execution. The post-link function is suitable to
execute the logic.
Pre-Link – It gets executed before the child elements are linked. It is not safe to do DOM
transformation. As the compiler linking function will fail to locate the correct elements.
It is good to use the pre-link function to implement the logic that runs when AngularJS has
already compiled the child elements. Also, before any of the child element’s post-link
functions have been called.

For more: codespaghetti.com

Comments are closed.

Call Now ButtonCall Now