AngularJs Interview Questions

JQuery - Interview Questions & Answers

1. What is jQuery?

• jQuery is a JavaScript library that simplifies JavaScript and AJAX programming. JavaScript is used to add interactivity and dynamic content to web pages. AJAX (Asynchronous JavaScript and XML) is used for handling external data asynchronously through JavaScript, without refreshing the whole page.
• jQuery emphasizes the interaction between JavaScript and HTML. jQuery contains all the common DOM, event, effects, and Ajax functions in a single JavaScript file.
• It is one of the most popular client side libraries.

2. Why do we need jQuery?

The jQuey is required for the following :

• To develop browser compatible web applications
• To improve the performance of an application
• Very fast and extensible
• UI related functions are written in minimal lines of codes

3. Explain the features of jQuery?

• Easily provide effects and do animations
• Ajax support
• Extensibility
• Cool pulgins
• Event handling
• Applying/Changing CSS
• DOM selection events

4. How JavaScript and jQuery are different?

JavaScript is a language while jQuery is a library built in the JavaScript language that helps to use the JavaScript language.

5. Does jQuery HTML work for both HTML and XML documents?

No, jQuery HTML only works for HTML documents not for XML Documents.

6. Which is the starting point of code execution in jQuery?

The starting point of jQuery code execution is $(document).ready () function which is executed when DOM is loaded.

7. What are the advantages of jQuery?

• Easy to use and learn.
• Easily expandable.
• AJAX Capabilities.
• Event detection and handling.
• Easy to use for DOM manipulation and traversal.
• Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
• Methods for changing or applying CSS, creating animations.
• Large pool of built in methods.
• Tons of plug-ins for all kind of needs.

8. Which is jQuery UI?

jQuery UI is a library which is built on top of jQuery library.jQuery UI comes with cool widgets,effects and interaction mechanism.

9. What is the advantage of using minimized version of jQuery?

Efficiency of web page increases when minimized version of jQuery is used.min.js file will be more than 50% less than the normal js file. Reduction in the file size makes the web page faster.

10. What is the use of $ symbol in Jquery?

$ Symbol is just replacement of jquery means at the place of $ you may use jquery hence $ symbol is used for indication that this line used for jquery.

11. Why jQuery is better than JavaScript?

jQuery is a library used for developing Ajax application and it helps to write the code clean and concise. It also handles events, animation and Ajax support applications.

12. What is method chaining in jQuery?

Method chaining is calling another method in result of another method, it result in clean and concise code, single search over DOM so better performance.

13. What are the methods used to provide effects?

Some of the effects methods are:

• Show()
• Hide()
• Toggle()
• FadeIn()
• FadeOut()

14. Is jQuery replacement of Java Script?

No. jQuery is not a replacement of JavaScript. jQuery is a different library which is written on top of JavaScript. jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML.

15. How can we debug jQuery?

There are two ways to debug jQuery:

• Add the debugger to the line from where we have to start debugging and then run Visual Studio in Debug mode with F5 function key.
• Insert a break point after attaching the process.

16. What are selectors in jQuery?

• jQuery Selectors are used to select one or a group of HTML elements from our web page.
• jQuery selectors always start with a dollar sign and parentheses: $()
• jQuery support all the CSS selectors as well as many additional custom selectors.

17. What is jQuery connect?

A ‘ jQuery connect’ is a plugin used to connect or bind a function with another function. Connect is used to execute function from any other function or plugin is executed.

18. What is difference between jQuery.get() and jQuery.ajax() method?

ajax() method is more powerful and configurable, allows you to specify how long to wait and how to handle error, get() is a specialization to over ajax just to retrieve some data.

19. What are the four parameters used for jQuery Ajax method?

The four parameters are

• URL: Need to specify the URL to send the request
• type: Specifies type of request(Get or Post)
• data: Specifies data to be sent to server
• Cache: Whether the browser should cache the requested page

20. What is the use of jQuery load method?

jQuery load method is a powerful AJAX method which is used to load the data from a server and assign the data into the element without loading the page.

21. What is difference between $(this) and ‘this’ in jQuery?

this and $(this) references the same element but the difference is that “this” is used in traditional way but when “this” is used with $() then it becomes a jQuery object on which we can use the functions of jQuery.
Example :

        $(document).ready(function(){

            $(‘#clickme’).click(function(){

            alert($(this).text());

            alert(this.innerText);

          });

        });

In the example given, when only “this” keyword is used then we can use the jQuery text() function to get the text of the element, because it is not jQuery object. Once the “this” keyword is wrapped in $() then we can use the jQuery function text() to get the text of the element.

22. What is chaining in jQuery?

• Chaining is a very powerful feature of jQuery. Chaining means specifying multiple functions and/or selectors to an element.
• Chaining reduces the code segment and keeps it very clean and easy to understand. Generaly chaining uses the jQuery built in functions that makes compilation a bit faster.

23. What is the use of jquery .each() function?

• The $.each() function is used to iterate over a jQuery object.
• The $.each() function can be used to iterate over any collection, whether it is an object or an array.

24. What is difference between prop and attr?

• In jQuery both prop() and attr() function is used to set/get the value of specified property of an element.
• The difference in both the function is that attr() returns the default value of the property while the prop() returns the current value of the property.

25. What is the difference between jquery.size() and jquery.length?

jQuery .size() method returns number of element in the object. But it is not preferred to use the size() method as jQuery provide .length property and which does the same thing. But the .length property is preferred because it does not have the overhead of a function call.

26.Explain .empty() vs .remove() vs .detach().

• .empty() method : Used to remove all the child elements from matched elements.

Syntax :$(selector).empty();

• .remove() method: Used to remove all the matched element. This method will remove all the jQuery data associated with the matched element.

Syntax :$(selector).remove();

• .detach() method : Same as .remove() method except that the .detach() method doesn’t remove jQuery data associated with the matched elements.

Syntax :$(selector).detach();

• .remove() is faster than .empty() or .detach() method.

27.What is a CDN?

A content delivery network or content distribution network (CDN) is a large distributed system of servers deployed in multiple data centers across the Internet. The goal of a CDN is to serve content to end-users with high availability and high performance.

28.What are the two types of CDNs?

There are two types of CDNs:

• Microsoft: Load jQuery from Ajax CDN
• Google: Load jQuery from Google libraries API

29.what are the advantages of using CDN?

Advantages of using CDN are :

• It reduces the load from your server.
• It saves bandwidth. jQuery framework will load faster from these CDN.
• The most important benefit is it will be cached, if the user has visited any site which is using jQuery framework from any of these CDN

30.Is window.onload is different from document.ready()?

• The window.onload() is Java script function and document.ready() is jQuery event which are called when page is loaded.
• The difference is that document.ready() is called after the DOM is loaded without waiting for all the contents to get loaded. While window.onload() function waits until the contents of page is loaded.
• Suppose there is very large image on a page, at that time window.onload() will wait until that image is loaded totally.
• So while using the window.onlaod() function the execution will be slow, but the document.ready() will not wait until the image is loaded.

31.What is the use of jQuery filter?

The jQuery filter is used to filter the certain values from the object list based on the criteria. Example is to filter certain products from the master list of products in a cart website.

32.What is resize() function in jQuery?

The resize() function is called whenever the browser size is changed.
Syntax:
.resize([event_data], handler(event_object))

• The “event_data” is the data to be sent to the handler.
• The “handler(event_object)” is a function to be called each time when the window is resized.

Example:

$(window).resize(function() {

            $('#message).text('window is resized to ' + $(window).width() + ‘x’ + $(window).height());

       });

33.What is the difference between jQuery's ready and holdReady?

• jQuery's ready is an event which gets triggered automatically when DOM is ready while holdReady is a signal/flag to hold this triggering.
• holdReady was included in 1.6 version and it works only if used before the execution/triggering of ready event.
• Once the ready event is fired, it has nothing to do.It is useful in dynamically loading scripts before the ready starts.It releases ready event execution when used with a true parameter.

34.What is the difference between eq() and get() methods in jQuery?

• eq() returns the element as a jQuery object. This method constructs a new jQuery object from one element within that set and returns it. That means that you can use jQuery functions on it.
• get() return a DOM element. The method retrieve the DOM elements matched by the jQuery object. But as it is a DOM element and it is not a jQuery-wrapped object. So jQuery functions can't be used.

35.What is event.PreventDefault?

The event.preventDefault() method stops the default action of an element from happening.
Example: Prevents a link from following the URL.

36. How many types of selectors are there in jQuery?

There are many types of selectors but basic selectors are:

• Name: Selects all elements which match with the given element Name.
• #ID: Selects a single element which matches with the given ID.
• .Class: Selects all elements which match with the given Class.
• Universal (*): Selects all elements available in a DOM.
• Multiple Elements E, F, G: Selects the combined results of all the specified selectors E, F or G.
• Attribute Selector: Select elements based on its attribute value.

Part-2

Question: Does Angular use the jQuery library?
Ans. Yes, Angular can use jQuery if you have included the jQuery library.
IF Not, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.

Question: What is ng-app, ng-init and ng-model?
ng-app - To initialize the Angular Application.
ng-init - To initialize the Angular Application data.
ng-model - To bind the html tags (input, select, textarea) to Angular Application Data.

Question: What is Data Binding in Angular JS?
It is synchronization of data between the model(Angular Application variable) and view components (display with {{}}).



Question: Give an Example of Data-Binding in AngularJS?

<div ng-app="" ng-init="quantity=10;cost=5">

<b>Total Cost: {{ quantity * cost }}</b>

Q11. What are templates in AngularJS?
Ans: In Angular, templates are written with HTML that contains Angular-specific elements and attributes. Angular combines the template with information from the model and controller to render the dynamic view that a user sees in the browser. In other words, if your HTML page is having some Angular specific elements/attributes it becomes a template in AngularJS.

Q12. What are directives in AngularJS?
Ans: Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS to attach a specified behavior to that DOM element or even transform the DOM element and its children. When AngularJS finds the directive at the time of rendering then it attaches the requested behavior to the DOM element. Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngClass.

Q13. Can we create our own directives?
Ans: YES. AngularJS allows us to create our own custom directive.

Q14. What are different type or classification of directives?
Ans: AngularJS directives can be classified in 4 different types .

• Element directives

1	<ng-directive></ng-directive>

• Attribute directives

1	<span ng-directive></span>

• CSS class directives

1	<span class="ng-directive: expression;"></span>

• Comment directives

1	<!-- directive: ng-directive expression -->

Q15. What is the name of directive is used to bootstrap an angular app?
Ans: ng-app directive is used to auto-bootstrap an AngularJS application. The ng-appdirective defines the root element of the application and is typically present in the root element of the page - e.g. on the <body> or <html> tags.

Q16. Can AngularJS have multiple ng-app directives in a single page?
Ans: The answer is NO. Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. If you have placed another ng-app directive then it will not be processed by AngularJS. You need to manually bootstrap the second app, instead of using second ng-app directive. Read How to define multiple angular apps on the same page?

Q17. Can angular applications (ng-app) be nested within each other?
Ans: NO. AngularJS applications cannot be nested within each other.

Q18. Can you bootstrap multiple angular applications on same element?
Ans: NO. If you try to do that then it will show an error "App Already Bootstrapped with this Element". This usually happens when you accidentally use both ng-app andangular.bootstrap to bootstrap an application. You can also get this error if you accidentally load AngularJS itself more than once.

Q19. In how many different ways, you can define a directive and what is the best practice?
Ans: Angular generally prefers camelCase for directives. But since HTML is not case-sensitive so it refers to directive in DOM in lower case form, delimited by dash (eg. ng-app). But when Angular complies then it normalize the directives.

Below are example of valid directive declaration.

• ng-model
• ngModel
• ng:model
• ng_model
• data-ng-model
• x-ng-model

The normalization process is as follows:
1. Strip x- and data- from the front of the element/attributes.
2. Convert the :, -, or _-delimited name to camelCase.

The best practice to use dash-delimited (ng-model) or directly camelCase form (ngModel). If you are using HTML validation tool, then it is advised to use data- prefixed version. And it also answers another question which is "Difference between ng-* and data-ng-*".

Q20. Mention some angularJS directives and their purpose?
Ans: The beauty of AngularJS directives is that they are self explainatory. By just looking at directive name, you will get the idea about purpose and use of directive. Below are some mostly used directives.

ng-app : Initializes application.
ng-model : Binds HTML controls to application data.
ng-Controller : Attaches a controller class to view.
ng-repeat : Bind repeated data HTML elements. Its like a for loop.
ng-if : Bind HTML elements with condition.
ng-show : Used to show the HTML elements.
ng-hide : Used to hide the HTML elements.
ng-class : Used to assign CSS class.
ng-src : Used to pass the URL image etc.
Event Listeners
ng-click : Click event to bind on HTML elements.
ng-dbl-click
Mouse event listeners
ng-mousedown
ng-mouseup
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
Keyboard event listeners
ng-keydown
ng-keyup
ng-keypress
ng-change

It's a long list. You can find about all the directives here.

That completes Part-2 as well. Keep visiting for upcoming set of interview questions and answers. You can also subscribe to RSS feed, follow us on Facebook and twitter to get the updates about this blog.

Q1. What is AngularJS?
Ans: AngularJS is open source client side MV* (Model – View – Whatever) framework for creating dynamic web applications. It gives life to your static HTML and makes it dynamic with its magic. It extends HTML using directives, expression and data binding techniques to define a powerful HTML template. 

Q2. Is AngularJS a framework, library or a plugin?
Ans: The suitable answer is that its a framework. As its lightweight so people also get confused between library and framework.AngularJS is open source client side MVC framework for creating dynamic web applications.

Q3. Is it same as jQuery?
Ans: NO. jQuery is great library for manipulating the DOM, providing better user experience with animations and effects. You can create website using jQuery but not a web application. jQuery is just a library to play around with HTML, where as AngularJS is a framework to build a dynamic web app as it supports two data binding, MVC, allow testability, templates and many more. Its like AngularJS like a toolbox and jQuery is just a tool. You can read more here.

Q4. Does Angular use the jQuery library?
Ans: YES, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.

Q5. Why AngularJS?
Ans: AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. 

• MVC implementation is done right.
• It extends HTML using directives, expression and data binding techniques to define a powerful HTML template.
• Two way data-binding, form validations, routing supports, inbuilt services.
• REST friendly.
• Dependency injection support.
• It helps you to structure and test your JavaScript code.

Q6. What are the key features/concepts of Angular.js?
Ans: When you start learning AngularJS, you will come across following terms and these are the features/concept of AngularJS. 

• Scope
• Directives
• Expression
• Filters
• Data Bindings
• Model
• View
• Controller
• Modules
• Services
• Dependency Injection

Q7. Is AngularJS is compatible with all modern browsers?
Ans: YES. AngularJS team run extensive test suite against the following browsers: Safari, Chrome, Firefox, Opera 15, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari).

Q8. What is the basic need to start with AngularJS?
Ans: To start with AngularJS, one need to make reference of angular.js. The latest version of AngularJS can be downloaded from AngularJS.com. You can either download the required js file and then host them locally or you can also use google CDN for referencing it. Here is the link for google CDN url for referencing AngularJS.

Q9. How does the AngularJS framework initialize itself?
Ans: The AngularJS has a self-executing anonymous function present in angular.js code, which does the initialization of AngularJS. Here is how below it looks,

01	(function(window, document, undefined) {
02	<!--

03	here goes entire AngularJS code
04	including functions, services, providers etc related code goes here

05	-->
06	if (window.angular.bootstrap) {

07	//AngularJS is already loaded, so we can return here...
08	console.log('WARNING: Tried to load angular more than once.');

09	return;
10	}

11
12	//try to bind to jquery now so that one can write angular.element().read()

13	//but we will rebind on bootstrap again.
14	bindJQuery();

15
16	publishExternalAPI(angular);

17
18	jqLite(document).ready(function() {

19	angularInit(document, bootstrap);
20	});

21
22	})(window, document);

Above function first check if Angular has already been setup. If it has, we return here to prevent Angular from trying to initialize itself a second time. And then it binds jQuery (if present) and publish external API. And finally angularInit() method does the trick for initialization of AngularJS.

Following articles are recommended to know in detail.
How AngularJS Works – Explained with Angular Code
Dissecting Angular: Initializing An App

Q10. What is the bootstrapping in AngularJS?
Ans: Bootstrapping in AngularJS is nothing but just initializing, or starting, your Angular app. AngularJS supports automatic bootstrapping as well as manual way as well. Read moreDifferent ways of bootstrapping AngularJS.

Q21. What is Angular Expression?
Ans: Angular expressions are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }}. For example, these are valid expressions in Angular:

• {{ 3+4 }}
• {{ a+b }}
• {{ user.name }}
• {{ items[index] }}

Demo

Q22. How Angular expressions are different from JavaScript expressions?
Ans: Angular expressions are like JavaScript expressions but there are few differences.

• Context : In Angular, the expressions are evaluated against a scope object, while the JavaScript expressions are evaluated against the global window object.
• 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.
• No Comma And Void Operators: You cannot use , (comma) or void in an Angular expression. And You cannot create regular expressions in an Angular expression.

Q23. What is compilation process in Angular?
Ans: Once you have the markup, the AngularJS needs to attach the functionality. This process is called "compilation" in Angular. Compiling includes rendering of markup, replacing directives, attaching events to directives and creating a scope. The AngularJS has compiler service which traverses the DOM looking for attributes. The compilation process happens in two phases.

• Compilation : traverse the DOM and collect all of the directives and creation of the linking function.
• Linking: combine the directives with a scope and produce a live view. The linking function allows for the attaching of events and handling of scope. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model.

When you create a new directive, you can write compile and/or linking functions for it to attach your custom behavior.

To understand the compilation process of Angular, must read "The nitty-gritty of compile and link functions inside AngularJS directives".

Q24. What is scope in AngularJS?
Ans: A scope is an object that ties a view (a DOM element) to the controller. In the MVC framework, scope object is your model. In other words, it is just a JavaScript object, which is used for communication between controller and view. 

Q25. What is $rootscope in AngularJS?
Ans: The $rootScope is the top-most scope. An app can have only one $rootScope which will be shared among all the components of an app. Hence it acts like a global variable. All other $scopes are children of the $rootScope. Since $rootScope is a global, which means that anything you add here, automatically becomes available in $scope in all controller. To add something in $rootScope, you need to use app.run function which ensures that it will run prior to the rest of the app. You may say that "run" function is like "main" method of angular app.

1	app.run(function($rootScope) {
2	$rootScope.name = "AngularJS";

3

});

And then you can use in your view. (via expression)

1	<body ng-app="myApp">
2	<h1>Hello {{ name }}!</h1>

3

</body>

Demo

Q26. What are controllers in AngularJS?
Ans: In Angular, a Controller is a JavaScript constructor function. When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. The job of a controller is to pass data from the model, to the view or the view can asks for something from the controller, and the controller turns to the model and takes that thing, and hands it back to the view.

1	var myApp = angular.module('myApp', []);
2	myApp.controller('MyController', ['$scope', function($scope) {

3	$scope.website = 'jquerybyexample.net';
4	}

5

]);

And then in your HTML using ng-controller directive,

1	<div ng-controller="MyController">
2	<h1>My website address is {{ website }}!</h1>

3

</div>

Demo

Q27. What is the difference between $scope and scope in AngularJS?
Ans: $scope is used while defining a controller (see previous question) where scope is used while creating a link function for custom directive. The common part is that they both refers to scope object in AngularJS, but the difference is that $scope uses dependency injection where scope doesn't. When the arguments are passed-in via dependency injection, their position doesn't matter. So for example, a controller defined as ($scope as first parameter)

1	myApp.controller('MyController', ['$scope', function($scope, $http) {

OR ($scope is second parameter)

1	myApp.controller('MyController', ['$scope', function($http, $scope) {

In both the case, the postion of $scope doesn't matter to AngularJS. Because AngularJS uses the argument name to get something out of the dependency-injection container and later use it.

But in case of link function, the position of scope does matter because it doesn't uses DI. The very first parameter has to be scope and that's what AngularJS expects. 

1	app.directive("myDirective", function() {
2	return {

3	scope: {};
4	link: function(scope, element, attrs) {

5	// code goes here.
6	}

7	};
8	});

However you can name it anything of your choice. In below code, foo is your scope object.

1	link: function(foo, bar, baz) {
2	// code goes here.

3

}

Q28. What is MVC Architecture in AngularJS?
Ans: In AngularJS, scope objects are treated as Model. The View is display of model that is your data. And the model gets initialized within a JavaScript constructor function, calledController in AngularJS. Let take a look at below code to understand it better.

01	<!DOCTYPE html>
02	<html>

03
04	<head>

05	<script data-require="angular.js@*" data-semver="1.3.6"src="https://code.angularjs.org/1.3.6/angular.js"></script>
06	<link rel="stylesheet" href="style.css" />

07	<script>
08	var myApp = angular.module('myApp', []);

09	myApp.controller('MyController', ['$scope',
10	function($scope) {

11	$scope.website = 'jquerybyexample.net';
12	}

13	]);
14	</script>

15	</head>
16

17	<body ng-app="myApp">
18	<div ng-controller="MyController">

19	<h1>My website address is {{ website }}</h1>;
20	</div>

21	</body>
22	</html>

Here MyController is a Controller and $scope (Model) is populated within Controller. And later on in div element $scope object data is displayed (View).

Q29. Can we have nested controllers in AngularJS?
Ans: YES. We can create nested controllers in AngularJS. Nested controller are defined in hierarchical manner while using in View. Take a look at below code. Here the hierarchy is "MainCtrl -> SubCtrl -> SubCtrl1".

01	<div ng-controller="MainCtrl">
02	<p>{{message}} {{name}}!</p>

03
04	<div ng-controller="SubCtrl">

05	<p>Hello {{name}}!</p>
06

07	<div ng-controller="SubCtrl2">
08	<p>{{message}} {{name}}! Your username is  {{username}}.</p>

09	</div>
10	</div>

11

</div>

Q30. In case of nested controllers, does the $scope object shared across all controllers?
Ans: YES. The $scope object is shared across all controllers and it happens due to scope inheritance. Since the ng-controller directive creates a new child scope, we get a hierarchy of scopes that inherit from each other. So if we define a property on a parent scope, the child scope can manipulate the property. And if the property is not present in child scope, then parent scope property's value is used. Lets consider, the previous question HTML where there are 3 controllers. And here is the AngularJS code to define these controllers.

01	var myApp = angular.module('myApp', []);
02	myApp.controller('MainCtrl', ['$scope',

03	function($scope) {
04	$scope.message = 'Welcome';

05	$scope.name = 'Jon';
06	}

07	]);
08	myApp.controller('SubCtrl', ['$scope',

09	function($scope) {
10	$scope.name = 'Adams';

11	}
12	]);

13	myApp.controller('SubCtrl2', ['$scope',
14	function($scope) {

15	$scope.name = 'Ema';
16	$scope.username = 'ema123';

17	}
18	]);

You will see that the controller "SubCtrl2" doesn't have "message" property define but it is used in HTML. So in this case, the immediate parent scope property will be used. But immediate parent scope which is "SubCtrl" in this case, also doesn't have "message" property. So it again goes one level up and finds the property is present so it uses parent scope value for "message" property and displays it.