AngularJS Interview Questions & Answers

1) 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

2) Explain what are the key features of AngularJS ?

The key features of AngularJS are

Scope

Controller

Model

View

Services

Data Binding

Directives

Filters

Testable

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

Forgiving: In Angular expression evaluation is forgiving to null and undefined, while in Javascript undefined properties generates TypeError or ReferenceError

No Control Flow Statements: Loops, conditionals or exceptions cannot be used in an angular expression

Filters: To format data before displaying it you can use filters

<div ng-controller = " apps/dashboard/account " ng-switch

On = "! ! accounts" ng-init = " loadData ( ) ">

AngularJS supports MVC pattern

Can do two ways data binding using AngularJS

It has per-defined form validations

It supports both client server communication

It supports animations

Data mining in classical template systems

Data binding in angular templates

Registering Callbacks: There is no need to register callbacks. This makes your code simple and easy to debug.

Control HTML DOM programmatically: All the application that are created using Angular never have to manipulate the DOM although it can be done if it is required

Transfer data to and from the UI: AngularJS helps to eliminate almost all of the boiler plate like validating the form, displaying validation errors, returning to an internal model and so on which occurs due to flow of marshalling data

No initialization code: With AngularJS you can bootstrap your app easily using services, which auto-injected into your application in Guice like dependency injection style

Using the standard browser API, first the HTML is parsed into DOM

By using the call to the $compile () method, compilation of the DOM is performed. The method traverses the DOM and matches the directives.

Link the template with scope by calling the linking function returned from the previous step

Element directives

Attribute directives

CSS class directives

Comment directives

Pre-linking function: Pre-linking function is executed before the child elements are linked. It is not considered as the 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

Compile function: It is used for template DOM Manipulation and collect all of the directives.

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

ng- valid

ng- invalid

ng-pristine

ng-dirty

To observer model mutations scopes provide APIs ($watch)

To propagate any model changes through the system into the view from outside of the Angular realm

A scope inherits properties from its parent scope, while providing access to shared model properties, scopes can be nested to isolate application components

Scope provides context against which expressions are evaluated

These are the ways that object uses to hold of its dependencies

Typically using the new operator, dependency can be created

By referring to a global variable, dependency can be looked up

Dependency can be passed into where it is required

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

The Template (View)

The Scope (Model)

The Controller (Controller)

Services

Filters

Directives

We can write AngularJs expressions in HTML, but we cannot write JavaScript expressions in HTML.

We cannot use conditional iterations, loops, and exceptions in AngularJs, but we can use all of these conditional properties in JavaScript expressions.

Filters are supported in AngularJs whereas filters are not supported in JavaScript.

angular.module will be created at first.

A controller will be assigned to the module.

The module will be linked with the HTML template(i.e. UI or View) with an angular app(ng-app).

The HTML template will be linked with the controller(i.e JS) with an ng-controller directive.

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.

Child scope – It is a nested scope which 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.

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 it does not contain any properties of the parent scope.

ng-bind

ng-bind-html

ng-bind-template

ng-non-bindable

ng-model

<input ng-bind="expression"/>

module.factory(‘factoryName', function);

<td> {{stu. grade}} </td>

</tr>

</table>

</Any>

</div>

<p>My first expression: {{157 + 122}} </p>

</div>

<ANY_HTML_ELEMENT ng-dblclick="{expression}">

...

</ANY_HTML_ELEMENT>

angular. lowercase: It converts a string to lowercase string.

angular. uppercase: It converts a string to uppercase string.

angular. isString: It will return true if the current reference is a string.

angular. isNumber: It will return true if the current reference is a number.

serviceApp.provider("logService", function ())

<p>

<button ng-disabled="mySwitch">Click Me!</button>

</p>

<p>

<input type="checkbox" ng-model="mySwitch"/>Button

</p>

<p>

</p>

</div>

Template: It describes an inline template as a string.

Template URL: This attribute specifies the AngularJs HTML compiler to replace the custom directive inside a template with the HTML content located inside a separate file.

Replace: It replaces the current element if the condition is true, if false append this directive to the current element.

Transclude: It allows you to move the original children of a directive to a location inside the new template.

Scope: It creates a new scope for this directive rather than inheriting the parent scope.

Controller: It creates a controller which publishes an API for communicating across the directives.

Require: It requires another directive to be present to function the current directive efficiently.

Link: It modifies resulting DOM element instances, adds event listeners, and set up data binding.

Compile: It modifies the DOM template for features across copies of a directive, as when used in other directives. Your compile function can also return link functions to modify the resulting element instances.

AngularJS supports MVC form.

Organize two ways data binding using AngularJS.

It supports mutual client-server communication.

It supports simulations.

$cookies.put(“username”, $scope.username);

$cookies.get(‘username’);

$cookies.remove(‘username’);

1. Differentiate between Angular and AngularJS.

Feature	AngularJS	Angular
*Architecture*	Supports MVC design model	Uses components and directives
*Language*	Recommended Language: JavaScript	Recommended Language: TypeScript
*Expression Syntax*	Specific ng directive is required for the image/property and an event	Uses () to bind an event and [] for property binding
*Mobile Support*	Doesn’t provide any mobile support	Provides mobile support
*Routing*	$routeprovider.when() is used for routing configs	@RouteConfig{(…)} is used for routing config
*Dependency Injection*	Doesn’t supports the concept of Dependency Injection	Supports hierarchical Dependency Injection with a unidirectional tree-based change detection
*Structure*	Less manageable	Simplified structure and makes the development and maintenance of large applications easier
*Speed*	With two-way data binding development effort and time are reduced	Faster than AngularJS with upgraded features
*Support*	No support or new updates are provided anymore	Active support and frequent new updates are made

2. What is Angular?

3. What are the advantages of using Angular?

It supports two-way data-binding

It follows MVC pattern architecture

It supports static template and Angular template

You can add a custom directive

It also supports RESTfull services

Validations are supported

Client and server communication is facilitated

Support for dependency injection

Has strong features like Event Handlers, Animation, etc.

4. What is Angular mainly used for?

5. What are Angular expressions?

Angular expressions are code snippets that are usually placed in binding such as {{ expression }} similar to JavaScript. These expressions are used to bind application data to HTML

6. What are templates in Angular?

7. In Angular what is string interpolation?

8. What is the difference between an Annotation and a Decorator in Angular?

Angular Certification Training

· Instructor-led Sessions

· Assignments

· Assessments

· Lifetime Access

Explore Curriculum

9. What do you understand by controllers in Angular?

10. What is scope in Angular?

11. What are directives in Angular?

Component Directives

Structural Directives

Attribute Directives

12. What is data binding?

String Interpolation

Property Binding

Event Binding

Two-Way Data Binding

13. What is the purpose of a filter in Angular?

14. What are the differences between Angular and jQuery?

Features	jQuery	Angular
*DOM Manipulation*	Yes	Yes
*RESTful API*	No	Yes
*Animation Support*	Yes	Yes
*Deep Linking Routing*	No	Yes
*Form Validation*	No	Yes
*Two Way Data Binding*	No	Yes
*AJAX/JSONP*	Yes	Yes

15. What is a provider in Angular?

Intermediate Level – Angular Interview Questions

16. Does Angular support nested controllers?

17. How can you differentiate between Angular expressions and JavaScript expressions?

Angular Expressions	JavaScript Expressions
1. They can contain literals, operators, and variables.	1. They can contain literals, operators, and variables.
2. They can be written inside the HTML tags.	2. They can’t be written inside the HTML tags.
3. They do not support conditionals, loops, and exceptions.	3. They do support conditionals, loops, and exceptions.
4. They support filters.	4. They do not support filters.

18. List at down the ways in which you can communicate between applications modules using core Angular functionality.

Using events

Using services

By assigning models on $rootScope

Directly between controllers [$parent, $$childHead, $$nextSibling, etc.]

Directly between controllers [ControllerAs, or other forms of inheritance]

19. What is the difference between a service() and a factory()?

20. What is the difference between $scope and scope in Angular?

$scope in Angular is used for implementing the concept of dependency injection (D.I) on the other hand scope is used for directive linking.

$scope is the service provided by $scopeProviderwhich can be injected into controllers, directives or other services whereas Scope can be anything such as a function parameter name, etc.

21. Explain the concept of scope hierarchy?

Root $scope

$scope for Controller 1

$scope for Controller 2

$scope for Controller ‘n’

22. What is AOT?

23. Explain jQLite.

24. Explain the process of digest cycle in Angular?

25. What are the Angular Modules?

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

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

27. What are the different types of filters in Angular?

currency: Format a number to a currency format.

date: Format a date to a specified format.

filter: Select a subset of items from an array.

json: Format an object to a JSON string.

limit: To Limits an array/string, into a specified number of elements/characters.

lowercase: Format a string to lower case.

number: Format a number to a string.

orderBy: Orders an array by an expression.

uppercase: Format a string to upper case.

28. What is Dependency Injection in Angular?

29. Differentiate between one-way binding and two-way data binding.

30. What are the lifecycle hooks for components and directives?

Front End Web Development Training

ANGULAR CERTIFICATION TRAINING

Angular Certification Training

Reviews

5(13680)

WEB DEVELOPMENT CERTIFICATION TRAINING

Web Development Certification Training

Reviews

5(3928)

REACT WITH REDUX CERTIFICATION TRAINING

React with Redux Certification Training

Reviews

5(3082)

JAVASCRIPT AND JQUERY ESSENTIALS TRAINING AND CERTIFICATION

JavaScript and JQuery Essentials Training and Certification

Reviews

5(1599)

JQUERY UI DEVELOPMENT

jQuery UI Development

Reviews

5(807)

constructor: It is invoked when a component or directive is created by calling new on the class.

ngOnChanges: It is invoked whenever there is a change or update in any of the input properties of the component.

ngOnInit: It is invoked every time a given component is initialized. This hook is only once called in its lifetime after the first ngOnChanges.

ngDoCheck: It is invoked whenever the change detector of the given component is called. This allows you to implement your own change detection algorithm for the provided component.

ngOnDestroy: It is invoked right before the component is destroyed by Angular. You can use this hook in order to unsubscribe observables and detach event handlers for avoiding any kind of memory leaks.

31. What do you understand by dirty checking in Angular?

32. Differentiate between DOM and BOM.

DOM	BOM
1. Stands for Document Object Model	1. Stands for Browser Object Model
2. Represents the contents of a web page	2. Works a level above web page and includes browser attributes
3. All the Objects are arranged in a tree structure and the document can be manipulated & accessed via provided APIs only	3. All global JavaScript objects, variables & functions become members of the window object implicitly
4. Manipulates HTML documents	4. Access and manipulate the browser window
5. W3C Recommended standard specifications	5. Each browser has its own implementation

Transpiling in Angular refers to the process of conversion of the source code from one programming language to another. In Angular, generally, this conversion is done from TypeScript to JavaScript. It is an implicit process and happens internally.

34. How to perform animation in Angular?

35. What is transclusion in Angular?

36. What are events in Angular?

ng-click

ng-copy

ng-cut

ng-dblclick

ng-keydown

ng-keypress

ng-keyup

ng-mousedown

ng-mouseenter

ng-mouseleave

ng-mousemove

ng-mouseover

ng-mouseup

ng-blur

37. List some tools for testing angular applications?

Karma

Angular Mocks

Mocha

Browserify

Sion

38. How to create a service in Angular?

Factory

Service

Provider

39. What is a singleton pattern and where we can find it in Angular?

Automatic Bootstrapping: this is done by adding the 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 Angular 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 application. It is useful where you want to perform any other operation before Angular wakes up and compile the page.

42. What is the difference between a link and compile in Angular?

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.

44. What is the difference between a provider, a service and a factory in Angular?

Provider	Service	Factory
A provider is a method using which you can pass a portion of your application into app.config	A service is a method that is used to create a service instantiated with the ‘new’ keyword.	It is a method that is used for creating and configuring services. Here you create an object, add properties to it and then return the same object and pass the factory method into your controller.

45. What are Angular Global APIs?

Comparing objects

Iterating objects

Converting data

angular. lowercase: Converts a string to lowercase string.

angular. uppercase: Converts a string to uppercase string.

angular. isString: Returns true if the current reference is a string.

angular. isNumber: Returns true if the current reference is a number.

Advanced Level – Angular Interview Questions

46. In Angular, describe how will you set, get and clear cookies?

cookie.set('nameOfCookie',"cookieValue");

cookie.get(‘nameOfCookie’);

cookie.delete(‘nameOfCookie’);

47. If your data model is updated outside the ‘Zone’, explain the process how will you the view?

ApplicationRef.prototype.tick(): It will perform change detection on the complete component tree.

NgZone.prototype.run(): It will perform the change detection on the entire component tree. Here, the run() under the hood will call the tick itself and then parameter will take the function before tick and executes it.

ChangeDetectorRef.prototype.detectChanges(): It will launch the change detection on the current component and its children.

48. Explain ng-app directive in Angular.

Angular Certification Training

Weekday / Weekend Batches

See Batch Details

First Name :

<br />

Last Name :

<br>

Full Name: {{firstName + ” ” + lastName }}

</div>

49. What is the process of inserting an embedded view from a prepared TemplateRef?

@Component({

selector: 'app-root',

template: `

<ng-template #template let-name='fromContext'><div>{{name}}</ng-template>

})

export class AppComponent implements AfterViewChecked {

@ViewChild('template', { read: TemplateRef }) _template: TemplateRef<any>;

constructor() { }

ngAfterViewChecked() {

this.vc.createEmbeddedView(this._template, {fromContext: 'John'});

}

50. How can you hide an HTML element just by a button click in angular?

<button ng-click="hide()">Hide element</button>

<p ng-hide="isHide">Hello World!</p>

</div>

controller: function() {

this.isHide = false;

this.hide = function(){

this.isHide = true; }; }

-------------------------------------------------------------------

1) What is Angular JS ?

2) Explain the architecture of AngularJS ?

The Template (View)

The Scope (Model)

The Controller (Controller)

3) What is the Template in AngularJS ?

4) What is the scope in AngularJS ?

5) What is the controller in AngularJS ?

6) Explain Directives in AngularJs ?

ng-app:- directive is used to flag the HTML element that Angular should consider to be the root element of our application. Angular uses the spinal-case for its custom attributes and camelCase for the corresponding directives which implement them.

ng-model:- directive allows us to bind values of HTML controls (input, select, textarea) to application data. When using ngModel, not only change in the scope reflected in the view, but changes in the view are reflected back into the scope.

ng-bind:- directive binds application modal data to the HTML view.

7) List some tools for testing AngularJS applications?

8) How do you share data between controllers in AngularJs ?

Using Events

$parent, nextSibling, controllerAs

Using the $rootScope

9) Explain AngularJS digest cycle?

10) What is internationalization in Angularjs ?

11) 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.

12) Explain basic steps to set up an Angular JS app?

Create an angular.module

Assign a controller to the module

Link your module to HTML with ng-app

Link the controller to HTML with ng-controller directive

13) What are AngularJS Modules?

14) Explain Directive scopes in AngularJs ?

Parent Scope: is default scope

Child Scope: If the properties and functions you set on the scope are not relevant to other directives and the parent, you should probably create a new child scope.

Isolated Scope: Isolated Scope is used if the directive you are going to build is self-contained and reusable. Does not inherit from parent scope, used for private/internal use.

15) How to isolate a directive’s Scope in AngularJS ?

This tells the directive to keep scope inside of itself and not to inherit or share with other scopes.

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

ng-bind has one-way data binding.

17) How would you make an AngularJS service return a promise? Write a code snippet as an example

angular.factory('testService', function($q){

return {

getName: function(){

var deferred = $q.defer();

//API call here that returns data

testAPI.getName().then(function(name){

deferred.resolve(name)

})

return deferred.promise;

}

})

18) Explain the role of $routeProvider in AngularJS ?

19) Explain how does AngularJS implement two-way binding?

20) What is dependency injection In AngularJs and how does it work?

21) What is $rootscope in AngularJS ? How is it different from the scope?

The main difference between $rootscope and $scope is that $rootscope is available globally to across all the controllers whereas $scope is available only in controllers that have created it along with its children controllers.

22) What is the difference between $scope and scope in AngularJS ?

23) What are AngularJS Expressions?

24) List the major browsers Supported by AngularJS?

Mozilla Firefox

Google Chrome

Microsft Edge

IE 10,11

IE Mobile,

Safari, iOS

Android: Nougat (7.0) Marshmallow (6.0)

25) How to enable HTML5 mode 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);

});

26) List some of the built-in validators in AngularJS ?

required

type=”number” OR type=”email”

27) What is AngularJS prefixes $ and $$?

$ prefix is used with public objects whereas $$ prefix is used with a private object.

28) What are directives? How to create and use custom Directive in AngularJS .

Creating custom directive in Angular js.

Angular js Directives are restricted to element and attribute and created using a directive function.Here is sample code to create a directive in Angular js.

var app = angular.module("myApp", []);

app.controller('AppController', function($scope) {

var users=[];

var user1={};

user1.firstName="Satyam";

user1.lastName="Kumar";

users.push(user1);

var user2={};

user2.firstName="Ravi";

user2.lastName="Sankar";

user2.push(user2);

$scope.users=students;

});

app.directive('user', function() {

//define the directive object

var directive = {};

//restrict = E, implies that directive is Element directive

directive.restrict = 'E';

//element will be replaced by this text/html

directive.template = "First Name: {{user.firstName}} , Last Name: {{user.lastName}}";

var linkFunction = function($scope, element, attributes) {

element.css("background-color", "#e1e1e1");

}

directive.link=linkFunction;

return directive;

});

Usage:

<h1>Custom Directive Demo</h1>

</div>

29) How to access parent scope from child controller in AngularJS ?

Example:

<p>{{ address }}</p>

<h1>{{ title }}</h1>

</div>

30) How to do email and Phone no. validation in AngularJS ?

31) What is the difference between a link and compile in AngularJS ?

Link function: To register DOM listeners as well as for the instance DOM manipulation, the Link function is used.

32) How can you get URL parameters from AngularJS Controller?

As the route wires up the URL to the controller and RouteParams can be passed to the controller to get the URL parameters.

33) How to enable caching in Angular 1.x?

In case you want to cache all the responses, then you can set the default cache value to TRUE.

And, if you want to cache a specific response, then you can set the config.cache value to TRUE.

34) Explain the use of Ng-If, Ng-Switch, And Ng-Repeat directives in AngularJS ?

In case the expression is assigned to ng-if, it evaluates to a false value, and then the element is deleted from the DOM tree, or else a clone of the element is reinserted into the DOM.

ng-switch – This directive is used based on a scope expression to conditionally swap DOM structure on the template.

The ng-switch default directive will be preserved at the specific location in a template.

ng-repeat – This directive is used to instantiate the template once per item from a collection.

Each template which is instantiated gets its own scope where the given loop variable is set to the current collection of item.

35) How to change start and end symbols used for AngularJS expressions?

36) List some difference between AngularJS and Angular 2?

AngularJS	Angular 2
Angular js or Angular 1.x is based on MVC Architecture	Angular 2 is based on service/ components
Javascript is used to write applications in Angular js.	Typescript (a superset of javascript) is used to write an application in Angular2.
A controller is used to writing logic and interact with Model and view.	In Angular 2 Controllers are totally eliminated and Components take its place.
Angular 1 is created for developing Single page web-applications.	In Angular 2 can be used for developing native applications for a mobile platform like React Native as well as interactive web applications.
Angularjs is easy to set up, you just need to include the angular.js library to start.	Angular 2 is dependent on other modules/ package. It gives little brainstorm to install and run Angular 2.
In Angularjs ng-app directive is used bootstrap the app.	ng-app is removed in Angular 2. You need to call Angular2 bootstrap method to bootstrap your application.

37) How to validate an URL in AngularJS ?

38) What is the use of $locale service in AngularJS ?

39) What is transclusion in AngularJS ?

ng-transclude or ng-transclude-slot attribute directives are used for transclusion in Angular JS.

40) What is a locale ID in AngularJS ?

41) What is the difference between a stateful and stateless component in AngularJs ?

42) List some methods supported by $http service in AngularJS ?

HEAD

POST

DELETE

CONNECT

OPTIONS

TRACE

43) What is "track by" in AngularJS and how does it work?

44) Explain $templateCache in AngularJs ?

45) What is the difference between a unit and end-to-end (e2e) test in AngularJS ?

46) Explain .config() and .run() methods in AngularJS ?

47) What is a Mocked Service in AngularJs? How to use it?

48) How to implement caching in Angular 1.x?

49) What are Compile, Pre, and Post linking in AngularJS ?

50) How to use $scope.$watch and $scope.$apply in AngularJS ?

51) How to use Multiple ng-app within a page in AngularJS ?

52) How to set focus on the input field in Angular 1.x?

53) Write a code to upload an image in AngularJS ?

54) How to send an Http post request in AngularJS ?

55) What is the difference between ‘this’ vs $scope in AngularJS controllers?

56) How $location is different from window.location in AngularJS ?

57) What is the use of ng-cloak directive in AngularJS ?

58) How to do Animation in AngularJS ?

59) How to format a date in AngularJS ?

60) What is $emit, $broadcast and $on in AngularJS ?

$rootScope.$broadcast('SummaryEvent', {

priority: priority

});

$scope.$on(''SummaryEvent'', function (event, args) {

Vm.priority=args.priority

});

61) What are scopeless controller in AngularJS ? why to use them?

62) What is Isolate Scope in AngularJS and why it is required?

63) What is the difference between $evalAsync and $timeout in AngularJS ?

64) How to disable right click event in AngularJS ?

65) What is a provider in AngularJS ?

66) Explain Bootstrapping in AngularJS ?

67) How AngularJS is different from Jquery?

68) List and explain different types of directive available in AngularJS ?

Element directives − It activates when a matching element is encountered.

Attribute − It activates when a matching attribute is encountered.

CSS − It activates when a matching CSS style is encountered.

Comment − It activates when a matching comment is encountered.

69) What is a dynamic route in AngularJS and how do you implement it?

70) What is different between ng routing and UI routing in AngularJS ?

71) Explain UI Routing in AngularJS ?

72) Explain Routing in AngularJS ?

73) Explain Event in AngularJS , List some events you have worked in AngularJs?

ng-click

ng-keyup

ng-keydown

ng-keypress

ng-dblclick

ng-mousedown

ng-mouseleave

ng-mouseenter

ng-change

74) How to create a service in AngularJS ?

Factory

Service

Provider

75) How to disable a control or element in AngularJS ?

76) Explain ng-include directive in AngularJS ?

77) How to hide or show a div in AngularJS ?

78) How to create a service using Factory in AngularJS ?

79) List some inbuilt services in AngularJs ?

$location

$scope

$http

$timeout

$interval

$window

80) What are filters in AngularJS ? Can you list some?

Filters	Functions
Uppercase	It used to convert text to upper case text.
Lowercase	It used to convert text to lower case text.
Currency	It is used to formats a number to a currency format.
Order by	It is used to orders the array on the basis of given criteria.
Filter	It is used to order the array to a subset of it on the basis of given criteria.

81) List some Cons or disadvantages of using AngularJS ?

JavaScript support mandatory

Greenness with Model View Controller (MVC)

The dilemma scopes

Other difficult features

Time consumption in old devices

Difficult to learn

82) Explain DDO in AngularJs ?

83) What is an interceptor in Angular? Why it is used?

84) Explain the functionality angular.copy() method?

85) Which filter will be executed one or more times during the each $Digest cycle?

1. What is the syntax of ForEach loop? which loop would you use to parse a JSON and why?

angular.ForEach(students,function(value,key)

{

//some code

}

2. Explain MVC in reference to angular?

3. What is two-way binding?

4. Can there be two ng-app for a single angular application?

The ng-app directive conveys AngularJS application that it is the root element. In your HTML document, you can have a single ng-app directive only. In case of more than one ng-app directives, the first appearance will be used.

5. What is $scope?

6. Name a few inbuilt angular filters?

Intermediate AngularJS Interview Questions

7. What are custom filters? Write down a syntax of the same?

angular.module('myCountFilterApp', [])

.filter('count',function()

{

return(function(input)

{

var out=[];

out=input.split(',');

return out.length;

})

});

8. What is the difference between ng-if and ng-show?

9. What is the purpose of the $watch?

$scope.$watch("checkInDate", function (newValue, oldValue) {

console.log("I've changed : ", newValue);

});

10. What is the purpose of $rootScope?

11. Write down the syntax for sending HTTP request?

$http({

method: "POST",

url: "URL",

data: JSON.stringify(value),

type: 'POST',

contentType: 'application/json; charset=utf-8'

}).then(function (response)

{

// success action

});

12. Where should one use form action instead of $http for accessing a method on a server?

13. What is the purpose of find index in AngularJS and what does it return if no value is found?

var index = $scope.items.findIndex(record => record.date =='2018-12-12');

14. What is ng-init used for?

15. Can I set an angular variable from PHP session variable without sending an HTTP request?

$scope.name='<?= $session['name'] ?>';

16. What is the significance of pipe operator in angularJs and What would be the result of following expression

17. Explain the following code:

<div ng-repeat="hotel in hotels|filter:setFinalFilter|orderBy : 'minPrice'">{{hotel.name}}</div>

18. What is service in AngularJS used for?

app.service('sharedData', function () {

//methods to get and set variable

});

19. What is dependency injection and what are the benefits of it?

myApp.controller('myController', function ($scope, $http, $location)

{

//logic

});

20. Write down the syntax of creating a new date object?

$scope.newDate=new Date();

21. Can parent controller access the methods of child controller or vice versa?

22. Evaluate the feasibility of the following code:

23. Can I use ternary operator in angular expression?

24. When is $location used? Explain with some scenario.

Advanced AngularJS Interview Questions

25. Explain the purpose of track by in ng-repeat?

item in items track by item.id

26. How is scope in directive different from scope in controller?

.directive('testDirective', function() {

return {

scope: {},

link: function(myScopeVar, elem,attr) {

console.log(scope)

}

})

app.controller(‘myController’,function(newScope)

{

})

27. Explain this code and possible values of restrict attribute?

.directive('myCustomer', function() {

return {

restrict: 'E',

scope: {

customerInfo: '=info'

templateUrl: 'my-customer.html'

};

});

'A' - only matches attribute name

'E' - only matches element name

'C' - only matches the class name

'M' - only matches the comment

28. What is the difference between compile and link?

29. Explain strict conceptual escaping?

30. How logs are maintained in AngularJS?

1. log()-writes a log message in the console

2. info()-writes an information message

3. warn()-write a warning message

4. error()-writes an error message

5. debug()-writes a debug message

$log.error(‘this will displayed as an error in console’)

3) Explain what is scope in AngularJS ?

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

4) Explain what is services in AngularJS ?

In AngularJS services are the singleton objects or functions that are used for carrying out specific tasks. It holds some business logic and these function can be called as controllers, directive, filters and so on.

5) Explain what is Angular Expression? Explain what is key difference between angular expressions and JavaScript expressions?

Like JavaScript, Angular expressions are code snippets that are usually placed in binding such as {{ expression }}

The key difference between the JavaScript expressions and Angular expressions

6) With options on page load how you can initialize a select box ?

You can initialize a select box with options on page load by using ng-init directive

7) Explain what are directives ? Mention some of the most commonly used directives in AngularJS application ?

A directive is something that introduces new syntax, they are like markers on DOM element which attaches a special behavior to it. In any AngularJS application, directives are the most important components.

Some of the commonly used directives are ng-model, ng-App, ng-bind, ng-repeat , ng-show etc.

8) Mention what are the advantages of using AngularJS ?

AngularJS has several advantages in web development.

9) Explain what Angular JS routes does ?

Angular js routes enable you to create different URLs for different content in your application. Different URLs for different content enables user to bookmark URLs to specific content. Each such bookmarkable URL in AngularJS is called a route

A value in Angular JS is a simple object. It can be a number, string or JavaScript object. Values are typically used as configuration injected into factories, services or controllers. A value should be belong to an AngularJS module.

Injecting a value into an AngularJS controller function is done by adding a parameter with the same name as the value

10) Explain what is data binding in AngularJS ?

Automatic synchronization of data between the model and view components is referred as data binding in AngularJS. There are two ways for data binding

11) What makes AngularJS better ?

12) Explain what is string interpolation in Angular.js ?

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

13) Mention the steps for the compilation process of HTML happens?

Compilation of HTML process occurs in following ways

14) Explain what is directive and Mention what are the different types of Directive?

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

Different types of directives are

15) Explain what is linking function and type of linking function?

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

16) Explain what is injector?

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 look up an object instance by its name.

17) Explain what is the difference between link and compile in Angular.js?

18) Explain what is factory method in AngularJS?

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

19) Mention what are the styling form that ngModel adds to CSS classes ?

ngModel adds these CSS classes to allow styling of form as well as control

20) Mention what are the characteristics of “Scope”?

21) Explain what is DI (Dependency Injection ) and how an object or function can get a hold of its dependencies ?

DI or Dependency Injection is a software design pattern that deals with how code gets hold of its dependencies. In order to retrieve elements of the application which is required to be configured when module gets loaded , the operation “config” uses dependency injection.

22) Mention what are the advantages of using Angular.js framework ?

Advantages of using Angular.js as framework are

23) Explain the concept of scope hierarchy? How many scope can an application have?

Each angular application consist of one root scope but may have several child scopes. As child controllers and some directives create new child scopes, application can have multiple scopes. When new scopes are formed or created they are added as a children of their parent scope. Similar to DOM, they also creates a hierarchical structure.

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

AngularJS combines the functionalities of most of the 3rd party libraries, it supports individual functionalities required to develop HTML5 Apps. While Backbone.js do their jobs individually.

25) Who created Angular JS ?

Intially it was developed by Misko Hevery and Adam Abrons. Currently it is being developed by Google.

----------------------------------------------------------------------------------------------------

Q #1) What do you understand by AngularJS?

Answer: AngularJS is a JavaScript framework that is used for making rich and extensible web applications.

It runs on plain JavaScript and HTML, hence 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.

Q #2) Define the features of AngularJS.

Answer: Its features include:

Q #3) Define Data Binding.

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

Q #4) Distinguish between AngularJs and JavaScript expressions.

Answer: There are several differences between AngularJs and JavaScript expressions:

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

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

Q #6) What are the Angular Modules?

Answer: 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.

Q #7) What are the directive scopes in AngularJs?

Answer: Three directive scopes are available in AngularJs.

They are:

Q #8) How can we share the data between controllers in AngularJs?

Answer: 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 $rootScope.

Q #9) What is the digest cycle in AngularJs?

Answer: It is a part of the process of data binding in AngularJs. It compares the old and new version 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.

Q #10) Explain the differences between one-way binding and two-way binding.

Answer: 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 which 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.

Q #11) Difference between sessionStorage, cookies, and localStorage.

Answer: Given below are the various differences.

SessionStorage – The data is stored for a particular session. The data will be lost whenever the browser tab will be closed or after some particular session. Maximum size stored can be up to 5MB.

LocalStorage – The data is stored with no expiration date. The data can only be cleared by JavaScript or by clearing the browser cache. Storage limit is maximum than the sessionStorage and cookie.

Cookies – It stores the data that has to be sent back to the server with some requests. The cookie's expiration varies on the type and duration set from either the server side or client side. Maximum size stored can be less than 4KB.

Q #12) What is the role of $routeProvider in AngularJs?

Answer: It is the $routeProvider that helps in navigating between different pages/links without separately loading the page/link whenever a user clicks on a link.

ngRoute config() method is used to configure the routeProvider.

Q #13) What is the difference between $scope and scope?

Answer: In AngularJs $scope is used to achieve dependency injection and scope is used for linking between View (i.e HTML) and Controller (i.e JS).

Q #14) How are AngularJs prefixes $ and $$ used?

Answer: $$ 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).

Q #15) Where can we implement the DOM manipulation in AngularJs?

Answer: Manipulation of DOM is in directives and apart from this it should not exist in controllers’ services or anywhere else.

Q #16) How can we show that a scope variable should have one-time binding only?

Answer: To show one-time binding we have to use “::” in front of the scope.

Q #17) What is SPA (Single page application) in AngularJs?

Answer: It is a web application which loads a single HTML page and dynamically updates the page as the user connects with the app.

By using AJAX and HTML a fluid and responsive web app can be created by SPA without invariant page reloads. Through this, we can make responsive UI with no page flicker.

Q #18) How many types of data bindings are there in AngularJs?

Answer: AngularJs supports both one way and two-way binding.

In one way binding if we change the data model, then there will be no dynamic change that you will see in view but in two way binding, there will be a dynamic change whenever a change will be made in the data model.

Q #19) What are the binding directives in AngularJs?

Answer: The binding directives include:

Q #20) Explain ng-bind and ng-bind-html directives.

Answer:

ng-bind: It is a directive which replaces the content of the HTML element with the value of the assigned variable or expression.

The content of the HTML element will change by changing the value of the variable or expression.

It is like ({{expression}}) and the syntax for this is,

ng-bind-html: It is a directive which binds the content to the HTML element(view) in a secure way. $sanitize service is used to sanitize the content to bind into an HTML element. To do this ‘angular-sanitize.js’ must be included in our application.

Syntax to write this,

Q #21) Explain ng-bind-template and ng-non-bindable.

Answer:

ng-bind-template: It replaces the text content of the element by interpolation of the template. It can contain multiple double curly markups.

Ng-non-bindable: It specifies AngularJs to not compile the content of this HTML element and its child nodes.

Q #22) Explain the ng-model directive in AngularJs.

Answer: This can be a leap hop with the custom HTML input form control( like input, textarea and select) to the application data. It provides form validation behavior with a two-way binding.

Q #23) Define Factory method in AngularJs.

Answer: It is quite similar to service, factories implement a module pattern in which we use a factory method to generate an object which is used for building models.

In a factory, a method object is returned at the end by creating a new object and adding functions as properties.

Syntax:

Q #24) What is ng-repeat directive in AngularJs?

Answer: It renders or iterates over a collection of items and creates DOM elements. It regularly monitors the source of data to re-render a template in response to a change.

Syntax:

Q #25) What is a controller in AngularJs?

Answer: A controller is a JavaScript function which is bound to the specified scope. Angular instantiates the new controller object and injects the new scope as a dependency.

A controller can be used to set up the initial state of the scope object and to add behavior to the object.

A controller cannot be used to share code or state across controllers, but instead of that Angular service can be used.

Q #26) What are filters in AngularJs?

Answer: The main work of filters is to modify the data, so that it can be merged into an expression or directive by using a pipe character (it is used for applying filters in an angular symbol of a pipe which is (|) or this is the symbol).

A filter formats the value of an expression for display to the user. They can be used in view templates, controllers, or services, and we can easily create our own filter as well. A filter is a module provided by AngularJS. There are nine components of a filter which are provided by AngularJS.

Examples: currency, date, filter, json, limitTo etc.

Q #27) What is ng-App directive in AngularJs?

Answer: It is used to define the AngularJs Application. It appoints the root element of an AngularJs application and it is kept near the <body> or <html> tag.

We can define any number of ng-app directives inside the HTML document, but only one AngularJS application can be bootstrapped automatically (auto-bootstrapped) and the other applications need to be bootstrapped manually.

Example:

Q #28) What is ng-switch in AngularJs?

Answer: It is used to conditionally exchange the structure of DOM on a template which is based on a scope-based expression.

This directive lets you show or hide the HTML element depending on the expression.

Q #29) What is the use of a double-click event in AngularJs?

Answer: It allows you to specify the custom behavior on a double click event of the mouse on a web page. We can use it (ng-dblclick) as an attribute of the HTML element like,

Q #30) What are ng-include and ng-click directives in AngularJs?

Answer:

ng-include helps to include different files on the main page. The ng-include directive includes HTML from an external file.

The included content will be included as child nodes of the specified element. The value of the ng-include attribute can also be an expression, returning a filename.

By default, the included file must be located on the same domain as the document.

ng-click can be used in scenarios like when you click on a button or when you want to do any operation. It tells AngularJS what to do when an HTML element is clicked.

Example:

The above code will increase the count variable by one whenever the button is clicked.

Q #31) What is a representational state transfer(REST) in AngularJs?

Answer: REST is an API style that operates over the HTTP request.

The requested URL identifies the data to be operated on, and the HTTP method identifies the operation that is to be performed. REST is a style of API rather than a formal specification, and there is a lot of debate and disagreement about what is and isn’t RESTful, which is a term used to indicate an API that follows the REST style.

AngularJS is flexible about how RESTful web services are consumed.

Q #32) What are the AngularJs Global API?

Answer: It is a combination of global JavaScript function which is used to perform tasks like comparing objects, iterating objects and converting data.

There are some common API functions like:

Q #33) What is a provider method in AngularJs?

Answer: A provider is an object which creates a service object by allowing to take more control.

$get() method is used in the provider which returns the service object. The service name and the factory function are the arguments that are passed into the provider method. AngularJS uses $provide to register new providers.

Syntax:

Q #34) What is Event Handling?

Answer: Event handling in AngularJs is very useful when you want to create advance AngularJs applications.

We need to handle DOM events like mouse clicks, moves, keyboard presses, change events and so on. AngularJs has some listener directives like ng-click, ng-dbl-click, ng-mousedown, ng-keydown, ng-keyup etc.

Q #35) What is AngularJs DOM?

Answer: AngularJs has some directives which are used to encapsulate AngularJs application data to a disabled attribute of the HTML elements.

Example: ng-disabled directive encapsulates the application data to the disabled attributes of HTML DOM element.

Q #36) What are the attributes that can be used during the creation of a new AngularJs directives?

Answer: There are several attributes which can be used during a new directive creation.

They include:

Q #37) Is Nested Controllers possible or not in AngularJs?

Answer: Yes, it is possible as Nested Controllers are well-defined in a classified manner while using a view.

Q 38) Is AngularJS well-suited with all browsers?

Answer: Yes, it is companionable with all browsers like Safari, Chrome, Mozilla, Opera, IE etc. as well as Mobile browsers.

Q 39) Define services in AngularJS.

Answer: AngularJS services are the singleton objects or functions which are used for carrying out definite tasks.

It embraces some corporate ideas and these purposes can be called as controllers, directive, filters and so on.

Q 40) Explain the advantages of AngularJS.

Answer: Advantages of AngularJS include:

Q #41) Difference between services and factory.

Answer: Factories are functions that return the object, while services are constructor functions of the object which is used by a new keyword.

Syntax:

Factory – module.factory(`factoryName`, function);

Service – module.service(`serviceName`, function);

Q #42) If both factory and service are equivalent, then when should I use them?

Answer: Factory provider is preferred using an object, whereas a service provider is preferred using with class.

Q #43) Difference between AngularJS and React.JS.

Answer: AngularJS is a TypeScript language based JS framework released in October 2010 by Google. It is a completely free framework and open source that is used in SPA projects (i.e. Single Page Application projects).

React.JS is a javascript library developed by Facebook in March 2013 for building UI. React components can be used on several pages but not as a SPA (i.e. Single Page Application).

Q #44) Difference between ng-bind and ng-model directive.

Answer: ng-bind directive has one way data bindings, data flows only from object to UI, not vice versa (i.e. $scope>>view) and ng-model directive has two way data bindings, data flows between UI to object and vice versa(i.e. $scope>>view and view>>$scope).

Q #45) What is the difference between AJAX and AngularJs?

Answer: AJAX stands for Asynchronous JavaScript which is used for sending and getting responses from the server without loading the page.

Whereas, AngularJS is a typescript language based JavaScript framework following the MVC pattern.

Q #46) Define ng-if, ng-show and ng-hide.

Answer: ng-if directive is used as if clause which removes the HTML element if the expression becomes false.

Syntax

ng-show directive is used to show the HTML element if the expression becomes true. And if the expression becomes false then the HTML element will be hidden.

Syntax

ng-hide directive is used to hide the HTML element if the expression becomes false.

Syntax

Both ng-show and ng-hide uses the display property method.

Q #47) What is the difference between ngRoute and ui-router?

Answer: ngRoute is a module developed by angularJS team which was a part of the core angularJS framework. Whereas ui-router was developed by a third-party community to overcome the problems of ngRoute.

ngRoute is a location or URL based routing, and ui-router is a state-based routing which allows nested views.

Q #48) How to set, get and clear cookies in AngularJs?

Answer: AngularJS has a module called ngCookies, so before injecting ngCookies angular-cookies.js should be included into the application.

Set Cookies – Put method is used to set cookies in a key-value format.

Get Cookies – Get method is used to get cookies.

Clear Cookies – Remove method is used to remove cookies.

--------------------------------------------------------------------------------------------------------------

Angular is an open-source front-end web framework. It is one of the most popular JavaScript frameworks that is mainly maintained by Google. It provides a platform for easy development of web-based applications and empowers the front end developers in curating cross-platform applications. It integrates powerful features like declarative templates, an end to end tooling, dependency injection and various other best practices that smoothens the development path.

A few of the major advantages of using Angular framework are listed below:

Angular is typically used for the development of SPA which stands for Single Page Applications. Angular provides a set of ready-to-use modules that simplify the development of single page applications. Not only this, with features like built-in data streaming, type safety, and a modular CLI, Angular is regarded as a full-fledged web framework.

Syntax: {{ expression }}

Templates in Angular are written with HTML that contains Angular-specific elements and attributes. These templates are combined with information coming from the model and controller which are further rendered to provide the dynamic view to the user.

String interpolation in Angular is a special syntax that uses template expressions within double curly {{ }} braces for displaying the component data. It is also known as moustache syntax. The JavaScript expressions are included within the curly braces to be executed by Angular and the relative output is then embedded into the HTML code. These expressions are usually updated and registered like watches, as a part of the digest cycle.

Annotations in angular are “only” metadata set of the class using the Reflect Metadata library. They are used to create an “annotation” array. On the other hand, decorators are the design patterns that are used for separating decoration or modification of a class without actually altering the original source code.

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.

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

A core feature of Angular, directives are attributes that allow you to write new HTML syntax, specific to your application. They are essentially functions that execute when the Angular compiler finds them in the DOM. The Angular directives are segregated into 3 parts:

In Angular, data binding is one of the most powerful and important features that allow you to define the communication between the component and DOM(Document Object Model). It basically simplifies the process of defining interactive applications without having to worry about pushing and pulling data between your view or template and component. In Angular, there are four forms of data binding:

Filters in Angular are used for formatting the value of an expression in order to display it to the user. These filters can be added to the templates, directives, controllers or services. Not just this, you can create your own custom filters. Using them, you can easily organize data in such a way that the data is displayed only if it fulfills certain criteria. Filters are added to the expressions by using the pipe character |, followed by a filter.

A provider is a configurable service in Angular. It is an instruction to the Dependency Injection system that provides information about the way to obtain a value for a dependency. It is an object that has a $get() method which is called to create a new instance of a service. A Provider can also contain additional methods and uses $provide in order to register new providers.

Yes, Angular does support the concept of nested controllers. The nested controllers are needed to be defined in a hierarchical manner for using it in the View.

Below are the most general ways for communicating between application modules using core Angular functionality :

A service() in Angular is a function that is used for the business layer of the application. It operates as a constructor function and is invoked once at the runtime using the ‘new’ keyword. Whereas factory() is a function which works similar to the service() but is much more powerful and flexible. factory() are design patterns which help in creating Objects.

The $scope objects in Angular are organized into a hierarchy and are majorly used by views. It contains a root scope which can further contain scopes known as child scopes. One root scope can contain more than one child scopes. Here each view has its own $scope thus the variables set by its view controller will remain hidden to the other controllers. The Scope hierarchy generally looks like:

AOT stands for Angular Ahead-of-Time compiler. It is used for pre-compiling the application components and along with their templates during the build process. Angular applications which are compiled with AOT has a smaller launching time. Also, components of these applications can execute immediately, without needing any client-side compilation. Templates in these applications are embedded as code within their components. It reduces the need for downloading the Angular compiler which saves you from a cumbersome task. AOT compiler can discard the unused directives which are further thrown out using a tree-shaking tool.

jQlite is also known as jQuery lite is a subset of jQuery and contains all its features. It is packaged within Angular, by default. It helps Angular to manipulate the DOM in a way that is compatible cross-browser. jQLite basically implements only the most commonly needed functionality which results in having a small footprint.

The digest cycle in Angular is a process of monitoring the watchlist for keeping a track of changes in the value of the watch variable. In each digest cycle, Angular compares the previous and the new version of the scope model values. Generally, this process is triggered implicitly but you can activate it manually as well by using $apply().

All the Angular apps are modular and follow a modularity system known as NgModules. These are the containers which hold a cohesive block of code dedicated specifically to an application domain, a workflow, or some closely related set of capabilities. These modules generally contain components, service providers, and other code files whose scope is defined by the containing NgModule. With modules makes the code becomes more maintainable, testable, and readable. Also, all the dependencies of your applications are generally defined in modules only.

Angular provides support to create custom directives for the following:

Below are the various filters supported by Angular:

Dependency Injection (DI) is a software design pattern where the objects are passed as dependencies rather than hard-coding them within the component. The concept of Dependency Injection comes in handy when you are trying to separate the logic of object creation to that of its consumption. The ‘config’ operation makes use of DI that must be configured beforehand while the module gets loaded to retrieve the elements of the application. With this feature, a user can change dependencies as per his requirements.

In One-Way data binding, the View or the UI part does not update automatically whenever the data model changes. You need to manually write custom code in order to update it every time the view changes.

Whereas, in Two-way data binding, the View or the UI part is updated implicitly as soon as the data model changes. It is a synchronization process, unlike One-way data binding.

An Angular component has a discrete life-cycle which contains different phases as it transits through birth till death. In order to gain better control of these phases, we can hook into them using the following:

In Angular, the digest process is known as dirty checking. It is called so as it scans the entire scope for changes. In other words, it compares all the new scope model values with the previous scope values. Since all the watched variables are contained in a single loop, any change/update in any of the variable leads to reassigning of rest of the watched variables present inside the DOM. A watched variable is in a single loop(digest cycle), any value change of any variable forces to reassign values of other watched variables in DOM

33. What is Transpiling in Angular?

In order to perform animation in an Angular application, you need to include a special Angular library known as Animate Library and then refer to the ngAnimate module into your application or add the ngAnimate as a dependency inside your application module.

The transclusion in Angular allows you to shift the original children of a directive into a specific location within a new template. The ng directive indicates the insertion point for a transcluded DOM of the nearest parent directive that is using transclusion. Attribute directives like ng-transclude or ng-transclude-slot are mainly used for transclusion.

Events in Angular are specific directives that help in customizing the behavior of various DOM events. Few of the events supported by Angular are listed below:

In Angular, a service is a substitutable object that is wired together using dependency injection. A service is created by registering it in the module it is going to be executed within. There are basically three ways in which you can create an angular service. They are basically three ways in which a service can be created in Angular:

Singleton pattern in Angular is a great pattern which restricts a class from being used more than once. Singleton pattern in Angular is majorly implemented on dependency injection and in the services. Thus, if you use ‘new Object()’ without making it a singleton, then two different memory locations will be allocated for the same object. Whereas, if the object is declared as a singleton, in case it already exists in the memory then simply it will be reused.

40. What do you understand by REST in Angular?

REST stands for REpresentational State Transfer. REST is an API (Application Programming Interface) style that works on the HTTP request. In this, the requested URL pinpoints the data that needs to be processed. Further ahead, an HTTP method then identifies the specific operation that needs to be performed on that requested data. Thus, the APIs which follows this approach are known as RESTful APIs.

41. What is bootstrapping in Angular?

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

43. What do you understand by constants in Angular?

In Angular, constants are similar to the services which are used to define the global data. Constants are declared using the keyword “constant”. They are created using constant dependency and can be injected anywhere in controller or services.

Angular Global API is a combination of global JavaScript functions for performing various common tasks like:

There are some common Angular Global API functions like:

For using cookies in Angular, you need to include a module called ngCookies angular-cookies.js.

To set Cookies – For setting the cookies in a key-value format ‘put’ method is used.

To get Cookies – For retrieving the cookies ‘get’ method is used.

To clear Cookies – For removing cookies ‘remove’ method is used.

You can update your view using any of the following:

ng-app directive is used to define Angular applications which let us use the auto-bootstrap in an Angular application. It represents the root element of an Angular application and is generally declared near <html> or <body> tag. Any number of ng-app directives can be defined within an HTML document but just a single Angular application can be officially bootstrapped implicitly. Rest of the applications must be manually bootstrapped.

Example

An HTML element can be easily hidden using the ng-hide directive in conjunction along with a controller to hide an HTML element on button click.

View

Controller

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 is architecture on 3 components. They are

AngularJS extends HTML attributes with Directives and binds data to HTML with Expressions.

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.

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.

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.

AngularJS directives are extended HTML attributes with the ng prefix. The 3 main directives of angular js are:

For testing AngularJS applications there are certain tools that you should use that will make testing much easier to set up and run.

Karma

Karma is a JavaScript command line tool that can be used to spawn a web server which loads your application’s source code and executes your tests. You can configure Karma to run against a number of browsers, which is useful for being confident that your application works on all browsers you need to support. Karma is executed on the command line and will display the results of your tests on the command line once they have run in the browser.

Karma is a NodeJS application and should be installed through NPM/YARN. Full installation instructions are available on the Karma website.

Jasmine

Jasmine is a behavior-driven development framework for JavaScript that has become the most popular choice for testing AngularJS applications. Jasmine provides functions to help with structuring your tests and also making assertions. As your tests grow, keeping them well structured and documented is vital, and Jasmine helps achieve this.

Jasmine comes with a number of matches that help you make a variety of assertions. You should read the Jasmine documentation to see what they are. To use Jasmine with Karma, we use the karma-jasmine test runner.

angular-mocks

AngularJS also provides the ngMock module, which provides mocking for your tests. This is used to inject and mock AngularJS services within unit tests. In addition, it is able to extend other modules so they are synchronous. Having tests synchronous keeps them much cleaner and easier to work with. One of the most useful parts of ngMock is $httpBackend, which lets us mock XHR requests in tests and return sample data instead.

Source:https://docs.angularjs.org/guide/unit-testing

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

AngularJS digest cycle is the process behind Angular JS data binding. In each digest cycle, Angular compares the old and the new version of the scope model values. The digest cycle is triggered automatically. We can also use $apply() if we want to trigger the digest cycle manually.

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

Below are some major difference between AngularJS and JavaScript Expressions

Angular Modules are place where we write code of our Angular application.Writing Modules makes our code more maintainable, testable, and readable. All dependencies for our app are defined in modules.

There are three types of directive scopes available in Angular.

You can isolate a directive’s Scope by passing an object to the scope option of directive.

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.

While in two way binding scope variable will change it’s value every time its data model changed is assigned to a different value.

To add promise functionality to a service, we inject the “$q” dependency in the service, and then use it like so:

The $q library is a helper provider that implements promises and deferred objects to enable asynchronous functionality

Source: https://docs.angularjs.org/api/ng/service/$q

The $routeProvider is used to configure roots within an AngularJS application. It can be used to link a URL with a corresponding HTML page or template, and a controller (if applicable).

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.

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.

In Angular JS $rootscope and $scope both are an object which is used for sharing data from the controller to view.

In Angular js $scope is used whenever we have to use dependency injection (D.I) whereas as the scope is used for directive linking.

Angular js Expression is JavaScript alike code snippets used to bind expression data in view or HTML. Angular expressions are written inside two curly braces.

Below are some major browsers supported by Angular js

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 js supports all standard HTML5 attributes to validate input. Below are few built-in validators in Angular js.

Angular uses these prefixes to prevent accidental code collision with users code.

In angular Directives are used to extend the attributes of Html elements.

As Above directive is restricted to Element directive, so you can use this directive as an element only.

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.

Angular form validation and ng-pattern directive can be used to validate the email and phone number in Angular JS.

Compile function: To template DOM manipulation and to gather all the directives, the compile function is used.

The RouteProvider and the RouteParams can be used to get the URL parameters in the controller.

Caching can be enabled by setting the config.cache value or the default cache value to TRUE or to a cache object that is created with $cacheFactory.

ng-if – This directive removes a portion of the DOM tree, which is based on the expression.

Passing the $interpolateprovider in the config can help us change the start and end symbols used in our Angular JS expressions.

Difference between AngularJS and Angular 2

Adding the regex directly to the ng pattern to the attribute can help you validate the URL in Angular JS.

locale service provides with the localization rules for Angular JS components.

The transclusion in Angular JS will allow you to move the original children of a directive to a specific location inside a new template.The ng directive marks the insertion point for the transcluded DOM of the very near parent directive that uses transclusion.

A locale is a particular geographical region. The commonly used locale ID comprises of two parts, the language code, and the country code.

A stateful component is a detail implementation of the component that can change over time and the stateful components can have stateless components inside them, while the stateless components are a plain JavaScript function.

Some of the methods supported by $http services are

The track by is used with ng-repeat and describes to AngularJS how it tracks the association between the DOM and the Model. It improves the rendering performance.

$templateCache is a Cache object that is created by the $cache factory. The first time you use a template, it is loaded in the $templateCache for easy and quick retrieval.

AngularJS provides full support for both the unit and end-to-end testing.

The unit testing is a method that helps the developers validate the isolated pieces of code and end-to-end testing is required when you want to ascertain the set of components integrated together work as you expect.

.config() – The .config() function is used to add configuration blocks on the module.

.run() - The .run() function is used to add run blocks on the module.

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.

The caching is implemented by using a cache object that stores and retrieves data and is primarily used by $templaterequest and script directive to cache the templates.

Compile – It compiles an HTML DOM into a template and produces a template function that is used to link scope and template together. It is executed only once.

Pre-link – It is executed before the child elements are linked.

Post-link – It is executed after the child elements are linked.

In AngularJS $scope.$watch the function is used to create a watch of some variables and $scope.$apply function is used to execute some code and call the $digest function.

There are two ways to use a Multiple ng-app within a single page in AngularJS. One is the bootstrap method and the other is ngModules directive.

Define a directive, use that directive on the element we are targeting and have it $watch a trigger/property to know when to focus the element.

The $http.post method is used to send an http post request in AngularJS. The method has three parameters namely URL, data, config.

The $scope is an object with the available methods and properties. It is used to get all controls on the controller.JS files. It is available for both the controller and the view. "This" is the controller used when the controller’s constructor function is called.

$Location is used when you don't want the full page to reload when the URL is changed and the window.location is used when you want to change the URL, reload the page or navigate to a different page.

It is used to prevent the Angular HTML template from getting displayed briefly by the browser in its uncompiled form while the application is still loading. It is used to avoid the undesirable flicker effect caused by HTML template display.

To animate the application, you need to include the AngularJS Animate Library and then refer to the ngAnimate module into the application or add ngAnimate as a dependency in your application module.

The AngularJS provides a date filter through which you can format the date into the required form.

Syntax

$broadcast, $emit, and $on are services in Angular Js. Below we have listed why they are used In Angular JS.

$broadcast(): $broadcast() service of Angular is used to propagate the event to all of his child controllers and it’s registered parent $rootscope.scope listeners.

$on(): AngularJS $on() service is used to listen any type of event raised by $broadcast and $emit.

$emit: $emit is similar to $broadcast service but it is used to propagate the event to upwards through the scope hierarchy and notify to the registered $rootScope.Scope listeners.

Scopeless controllers have no $scope injected and the functions and properties are binded directly onto the controller. Scopeless controllers are used in the situation where the controller becomes complex by using the $scope to provide data.

It is a scope that exists separately with no prototypal inheritance. It makes the components reusable and permits to control the binding either one-way or two-way.

$evalAsync executes the expression on the current scope at a later time and makes no guarantees as to when the expression will be executed.

$timeout also executes the expression on the current scope on later time but also runs after the DOM has been manipulated by the Angular and after the browser renders that cause flicker in some cases.

In order to disable the right click event in AngularJS, you need to add the disable-right-click as the element’s attribute. Simply use preventDefault(), this cancels the event and stops further propagation of the event.

The provider in AngularJS is used to internally create a factory, services etc., during the phase of configuration. The provider is the special factory method which is used to return the service/value/factory.

After reading the HTML which is there within the root, Angular compiles it all into an internal representation. This process of reading and compiling is called as the bootstrapping process. When the code is written instead of the use of the ng-app directive, manual bootstrapping is done. It is actually the functional component that is there in the Core ng module which is actually used so that the user can start up an application hosted by Angular manually. Thereby it provides more control over the beginning of the application.

AngularJS is a framework with key features like models, two-way binding, directives, routing, dependency injections, unit tests etc., whereas the Jquery is a library used for DOM manipulation with no two-way binding features.

The different types of directives available in AngularJS are:

A dynamic route is a typical approach to server communication is using the HTTP server. In order to implement it, firstly write a config function that uses $http and $routeprovider to gather all information on available routes.

The ng routing is deep linking services and directives for angular applications whereas the UI routing is a 3rd party module routing and is very powerful. It does everything an ng router does as well as has many other extra functions.

It is a routing framework for AngularJS and provides a different approach than ngRoute. It changes the application views based on the state of the application and not just the route URL

Routing is one the core feature of AngularJs Framework that is useful in building a single page web application with multiple views. In Angular ngRoute Module is used to implement Routing. ngView,$routeProvider,$route and $routeParams are different components of the ngRoute Module that helps to configure and mapping Url to views.

The AngularJS framework includes certain directives that can be used to provide the custom behavior on various DOM events. Some of the events are:

The service in AngularJS is created by registering it with the module it is going to operate in. There are three ways to create the angular service. They are:

Using ng-disabled attribute will help you disable element in AngularJS.

The HTML pages can be embedded within an HTML page using the ng-include directive.

In order to hide/show the div in AngularJS just get rid of display: none, the rest is in the control. If you want to hide it by default then set the value of scope.myvalue to false.

Creating a service using the module's factory API is one of the most common ways to create a service. We first create an object, add properties to it and return the same object, which can later be injected into the components like service, controller, filter or directive.

There are 30 inbuilt services in AngularJs. Below are few most used services in AngularJs.

Angualr.JS filters are efficient in modifying the data. With the help of pipe (|) character, they are clubbed into the directive or expression.

Here is the list of cons of AngularJS

· Just be imaginative, the devices that access your server but they are disabled for JavaScript. So the users are unable to access your web apps or website. In the case of a great number of users, AngularJS based web is not so efficient. In spite of this, it is good for plain HTML-based web.

· If you are a developer and want to do some traditional with almost zilch knowledge of MVC then you are not advised to use the Angular.JS because it will be time-consuming for you. You should hire an expert who has good knowledge of MVC if you are short in time to submit the project

· If you are fresh in Angular.JS then it will be difficult for you to deal with complex entities such as Quite layered and hierarchically and scopes. Debugging the scope is believed a very hard task for many programmers.

· There are several features of Angular.JS like directives, dependency injection and factories which are hard to use. So, you have to spend a lot of time on it to understand all of them or prefer to hire an expert.

· The browser on old computers and mobile are failed or take a little more time to render pages of application and websites designed using the framework. It happens because the browser begins to complete some supplementary tasks like DOM manipulation. But this quibble does not seem in the new devices.

· It is very hard to accustom to the framework. Plus, you may get some additional problems like limited documentation. But Angular.JS continuously make it easier

DDO Stands for Directive Definition Object. DDO is used while creating a custom directive in AngularJs.

An interceptor is a middleware code in AngularJs where all the $http requests go through. It is attached with $httpProvider service and able to intercept request and response objects. Interceptor Middleware is useful for error handling, authentication and other filters you want to apply on request and response.

It is used to allocating the value of an object into another object however the object value must not be altered.

If you are adding any new property or altering any value of the property then the object noting to the same object will update by applying angular. Copy() method.

$stateful filters are executed one or more times during each $Digest cycle. It is not recommended to write a $stateful filter in AngularJS.

-----------------------------------------------------------------------------------------------------------------------

1. What is the syntax of ForEach loop? which loop would you use to parse a JSON and why?

Below is the syntax of for each loop:

angular.ForEach(students,function(value,key)

{

//some code

}

To parse JSON, we can use any loop, but I would use for each loop because it will minimize my code by eliminating the need to store the length of a JSON in a variable.

2. Explain MVC in reference to angular?

AngularJs is an MVC based framework, where Model for a controller contains data, the controller for a view contains the logic to manipulate that data, and the view is the HTML that displays the data.

A $scope can be considered as a model, whereas the functions written in angular controller modifies the $scope and HTML display the value of the scope variable.

3. What is two-way binding?

Two-way binding means that when data in the view is changed the underlying model gets updated automatically and when a model from the controller is changed the view gets updated.

4. Can there be two ng-app for a single angular application?

No, there can't be more than one ng-apps for a single AngularJS application.

5. What is $scope?

$scope is a model for a controller and helps the controller in interacting with the view.

(This is a super short answer to this question, but it is complete in every sense. Try not to put any additional angular terms).

6. Name a few inbuilt angular filters?

Currency, lowercase, uppercase, number, date are few inbuilt angular filters.

Intermediate AngularJS Interview Questions

Let us take a look at some mid-level AngularJS interview questions

7. What are custom filters? Write down a syntax of the same?

With AngularJS we can create our own filters. This can be done by associating the filter to our module. These types of filters are called custom filters.

Below is the code to count the number of elements in the string by using filter:

angular.module('myCountFilterApp', [])

.filter('count',function()

{

var out=[];

return(function(input)

{

})

out=input.split(',');

return out.length;

});

In the above example, if the string is "21, 34, 45" then output after applying filter will be 3.

Here is some more information on custom filters.

8. What is the difference between ng-if and ng-show?

Ng-if doesn’t render the portion of DOM element on which it is associated if the specified condition is not met whereas ng-show renders the DOM element but set its CSS property of display to none if the specified condition is not met.

9. What is the purpose of the $watch?

The purpose of $watch is to keep track of the old and new value of the watched expression. Below is the code of using $watch.

$scope.$watch("checkInDate", function (newValue, oldValue) {

console.log("I've changed : ", newValue);

});

10. What is the purpose of $rootScope?

$rootScope helps in communication between different controllers of an application. AngularJS can have only one rootScope for an app.

11. Write down the syntax for sending HTTP request?

$http({

method: "POST",

url: "URL",

data: JSON.stringify(value),

type: 'POST',

}).then(function (response)

contentType: 'application/json; charset=utf-8'

{

});

// success action

12. Where should one use form action instead of $http for accessing a method on a server?

Form action should be used at a place where the server-side method takes the control to some other view in other word leads to redirection whereas HTTP request should be used where the server method returns some data.

13. What is the purpose of find index in AngularJS and what does it return if no value is found?

Find index returns the position of an element in an object. If the requested element is not found then -1 is returned.

var index = $scope.items.findIndex(record => record.date =='2018-12-12');

In the above code, index of the object is returned where item.date=2018-12-12.

14. What is ng-init used for?

Ng-init is used in a scenario where we want some action to be done before the initialization of a portion of the DOM element.

15. Can I set an angular variable from PHP session variable without sending an HTTP request?

Yes, we can do that by injecting PHP in the required place.

$scope.name='<?= $session['name'] ?>';

This will work only if you are using PHP to render the HTML and the above javascript is writter in <script> tag inside the php file.

16. What is the significance of pipe operator in angularJs and What would be the result of following expression

Pipe operator in AngularJS represents filters that are used on the expression. The preference order is from left to right. So, the result of the above expression would be SOMEVALUE.

17. Explain the following code:

<div ng-repeat="hotel in hotels|filter:setFinalFilter|orderBy : 'minPrice'">{{hotel.name}}</div>

Here, setFinalFilter is a custom filter used on the hotels object. The result would display the name of filtered hotels in ascending order of their minPrice.

18. What is service in AngularJS used for?

Services in AngularJS are objects which are used to communicate within entire applications.

app.service('sharedData', function () {

//methods to get and set variable

});

19. What is dependency injection and what are the benefits of it?

Dependency injection is a powerful design pattern that allows separating the concerns of different components in an application and provides a way to inject the dependent component into the client component.

Consider the below code:

myApp.controller('myController', function ($scope, $http, $location)

{

//logic

});

Here, a controller is declared with its dependencies.

.$http, $location are all services which are injected into the controller as a dependent entity. All of them have some independent specific task associated with it. MyController does not need to create their instance, but it can directly use them.

20. Write down the syntax of creating a new date object?

The syntax for creating new data object:

$scope.newDate=new Date();

21. Can parent controller access the methods of child controller or vice versa?

No, the parent controller cannot access the methods of child controller, but the child controller can access the methods of the parent controller.

22. Evaluate the feasibility of the following code:

This code will give a syntax error. We cannot use ng-options without ng-model. Using the array or object obtained by evaluating the ngOptions expression, the ngOptions attribute dynamically generates a list of < option > elements for the < select > element. On selecting an item in the < select > menu, the array element or object property will be bound to the model identified by the ngModel directive. Hence, ng-model is must with ng-options.

23. Can I use ternary operator in angular expression?

Yes, ternary operators or no flow operators can be used in an angular expression.

24. When is $location used? Explain with some scenario.

$location is an angular service which keeps track of the URL of the application and makes it available to a controller. If $location is changed from the controller, the impact is reflected in the address bar, and vice versa is also true.

Advanced AngularJS Interview Questions

25. Explain the purpose of track by in ng-repeat?

In AngularJS, directives like ng-repeat keep track of all the elements to minimize the DOM creation. It does that by storing the object instance when a new element is added to the collection. Angular does not re-render the entire element set; it just renders the new element.

When ng-repeats is used with the object having some unique id, the tracking should be done by that identifier, instead of the object instance. Consider the below code.

item in items track by item.id

Here, tracking is done based on item id.

26. How is scope in directive different from scope in controller?

Both $scope and scope are instances of scope object. The difference lies in the name that is used for them. In order to explain the difference between $scope and scope, we need to know about directives with an isolated scope.

Let us try to understand this with the following code:

.directive('testDirective', function() {

return {

scope: {},

link: function(myScopeVar, elem,attr) {

console.log(scope)

}

})

In the above code, a directive with an isolated scope is declared. The link used in above code is a regular Javascript function with signature scope, element and attribute. The name of scope object is not important because whatever name you give to this element, it will be linked to the directive’s scope object. That is why, using myScopeVar will not give any error. The $scope, on other hand, cannot be used with any other name.

For further clarification, let us see the following code:

app.controller(‘myController’,function(newScope)

{

})

The above code will give an error. Here are more details on scope v/s $scope.

27. Explain this code and possible values of restrict attribute?

.directive('myCustomer', function() {

return {

restrict: 'E',

customerInfo: '=info'

scope: {

});

templateUrl: 'my-customer.html'

};

Here, a custom directive of name myCustomer is declared. The directive is restricted to element name only. The directive has its own isolated scope which has a property customerInfo and takes its value from info attribute of the myCustomer element.

The template/view of the directive is my-customer.html. The possible declaration of this directive would be .

The possible values of restrict can be:

'A' - only matches attribute name

'E' - only matches element name

'C' - only matches the class name

'M' - only matches the comment

28. What is the difference between compile and link?

Compile can be considered as a service which traverses the HTML, find for all the directives and returns a link function.

Link, on the other hand, combines the model with a view. Any change in model reflects the change in view and any change in view reflects in the model.

Here is more detail on compile and link.

29. Explain strict conceptual escaping?

AngularJS treats all values as untrusted/unsecured by default in HTML or sensitive URL bindings. When binding untrusted values, AngularJS will automatically run security checks on them (sanitizations, whitelists, depending on context), or throw an error when it cannot guarantee the security of the result. This behaviour depends strongly on contexts: HTML can be sanitized, but template URLs cannot.

To illustrate this, consider the ng-bind-html directive. It renders its value directly as HTML. When given an untrusted input, AngularJS will attempt to sanitize it before rendering if a sanitizer is available. To bypass sanitization and render the input as-is, you will need to mark it as trusted.

Here is more detail on SCE.

30. How logs are maintained in AngularJS?

The follow-up question can be how to Blackbox AngularJS source in the browser and which all browser supports Blackbox?

Logs are maintained with the help of $log service. The main purpose of this service is to help in debugging and troubleshooting. This is done with the help of four methods.

1. log()-writes a log message in the console

2. info()-writes an information message

3. warn()-write a warning message

4. error()-writes an error message

5. debug()-writes a debug message

$log.error(‘this will displayed as an error in console’)

AngularJS Interview Questions & Answers

Post a Comment

No comments

Blog Archive

Popular Posts

Random Posts

Recent Posts

Popular Posts

AngularJS Interview Questions & Answers

Related Posts

Post a Comment

No comments

Blog Archive

Popular Posts

Random Posts

Recent Posts

Popular Posts