AngularJS Interview Questions And Answers

1. What are directives in AngularJS?
Answer: A core feature of AngularJS, directives are attributes that allow you to invent new HTML syntax, specific to your application. They are essentially functions that execute when the Angular compiler finds them in the DOM. Some of the most commonly used directives are ng-app,ng-controller and ng-repeat.

The different types of directives are:

  • Element directives
  • Attribute directives
  • CSS class directives
  • Comment directives

2. What are the characteristics of ‘Scope’?
Answer: A scope 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. The characteristics of Scope are:

Scopes provide APIs ($watch) to observe model mutations.

Scopes provide APIs ($apply) to propagate any model changes through the system into the view from outside of the “Angular realm” (controllers, services, Angular event handlers).
Scopes can be nested to limit access to the properties of application components while providing access to shared model properties. Nested scopes are either “child scopes” or “isolate scopes”. A “child scope” (prototypically) inherits properties from its parent scope. An “isolate scope” does not. See isolated scopes for more information.
Scopes provide context against which expressions are evaluated. For example, {{username}} expression is meaningless, unless it is evaluated against a specific scope which defines the username property.

3. Explain what is injector in AngularJS?
Answer:
An injector is a service locator, used to retrieve object instance as defined by the provider, instantiate types, invoke methods, and load modules.

4. What are the advantages of using Angular.js framework?
Answer:
Angular.js framework has the following advantages:

  • Supports two-way data-binding
  • Supports MVC pattern
  • Support static template and an angular template
  • Can add a custom directive
  • Supports REST full services
  • Supports form validations
  • Support both client and server communication
  • Support dependency injection
  • Applying Animations
  • Event Handlers

5. What is the difference between AngularJS and backbone.js?
Answer: AngularJS combines the functionalities of most third-party libraries and supports individual functionalities required to develop HTML5 Apps. While Backbone.js does these jobs individually.

6. Can AngularJS have multiple ng-app directives in a single page?
Answer: 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 another ng-app directive has been placed then it will not be processed by AngularJS and we will need to manually bootstrap the second app, instead of using second ng-app directive.

7. What are Controllers in AngularJS?
Answer: 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.

8. What is bootstrapping in AngularJS?
Answer: Bootstrapping in AngularJS is nothing but initializing, or starting the Angular app. AngularJS supports automatic and manual bootstrapping.

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

9. What is bootstrapping in AngularJS?
Answer: Angular expressions are code snippets that are usually placed in binding such as {{ expression }} similar to JavaScript.

The main differences between Angular expressions and JavaScript expressions are:

Context: The expressions are evaluated against a scope object in Angular, while Javascript expressions are evaluated against the global window
Forgiving: In Angular expression, the evaluation is forgiving to null and undefined whereas in JavaScript undefined properties generate TypeError or ReferenceError
No Control Flow Statements: We cannot use loops, conditionals or exceptions in an Angular expression
Filters: In Angular, unlike JavaScript, we can use filters to format data before displaying it. 

10. What is the difference between a link and compile in Angular.js?
Answer:
Compile function is used for template DOM Manipulation and to collect all the directives.
The link function is used for registering DOM listeners as well as for instance DOM manipulation and is executed once the template has been cloned.

11. Can angular applications (ng-app) be nested within each other?
Answer:
No. AngularJS applications cannot be nested within each other.

12. Can we have nested controllers in AngularJS?
Answer: Yes, we can create nested controllers in AngularJS. Nested controllers are defined in a hierarchical manner while using in View.

13. Explain the concept of scope. How does scope inheritance work in AngularJS?
Answer: a Scope is an object that represents the data model of an AngularJS application—it is the glue between the view and the application controller. Scope inheritance closely mimics the DOM structure of the application. With the exception of isolated scopes created using custom directives, scopes follow prototypal inheritance. The code block below demonstrates typical scope inheritance.

The important thing to note in the above example is that values have been set to models in fruitController, and the message in appleController has been overridden.

14. Explain the difference between a factory and a service in AngularJS?
Answer: AngularJS encourages developers to store business logic and persistent data separately from controllers and scopes within an application, by providing factories and services. To understand the difference, let’s take a look at the code block below.

// The code below is a service.
app.service(‘MyService’, function () {
this.helloWorld = function () {
console.log(‘Hello World’);

// The code below is a factory.
app.factory(‘MyService’, function () {
return {
HelloWorld: function () {
console.log(‘Hello World’);
syntactically distinct, the above examples perform the same task of printing “Hello World” to the console. The conceptual difference you’ll want to look for in the applicant’s answer however, is that a service is a constructor function while a factory is a function that must be called. This is why the service can use the “this” keyword while a factory must explicitly return the object that it creates. An even better answer would also reveal that a service is actually calling a predefined factory deep within the Angular.js file loaded into all AngularJS applications. Check out this code snippet from the Angular.js file.

// By calling service() you are also calling a predefined factory() within AngularJs
function service(name, constructor) {
return factory(name, [‘$injector’, function($injector) {
return $injector.instantiate(constructor);

15. What does SPA (Single Page Application) mean? How can we implement SPA with Angular?
Answer: Single Page Applications (SPAs) are web apps that load a single HTML page and dynamically update that page as the user interacts with the app. In a SPA the page never reloads, though parts of the page may refresh. This reduces the round trips to the server to a minimum.

It’s a concept where we create a single shell page or master page and load the webpages inside that master page instead of loading pages from the server by doing postbacks. We can implement SPA with Angular using Angular routes. You can read up about SPAs here.

16. What is the main thing that you would need to change if you were migrating from AngularJS 1.4 to AngularJS?
Answer: To adapt to the new AngularJS 1.5 components, you would need to change .directive to .component

17. What are the key features of AngularJS?
Answer:

  • Scope
  • Controller
  • Model
  • View
  • Services
  • Data Binding
  • Directives
  • Filters
  • Testable

18. Define scope in AngularJS?
Answer: Scope is a special JavaScript object that plays the role of joining the controller (JavaScript) with the views (HTML). The controller sets properties on the scope and the view binds to them.

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

20. Why AngularJS?
Answer: AngularJS lets us extend HTML vocabulary for our application resulting in an expressive, readable, and quick to develop environment. Some of the advantages are:

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.

21. Is AngularJS compatible with all browsers?
Answer: Yes AngularJS is compatible with the following browsers: Safari, Chrome, Firefox, Opera 15, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari).

22. How to implement routing in AngularJS?
Answer:

It is a five-step process:

Step 1: – Add the “Angular-route.js” file to your view.
Step 2: – Inject “route” functionality while creating an Angular app object.
Step 3: – Configure the route provider.
Step 4: – Define hyperlinks.
Step 5: – Define sections where to load the view.

23. Explain $q service, deferred and promises?
Answer: Promises’ are post-processing logics which are executed after some operation/action is completed whereas ‘deferred’ is used to control how and when those promise logics will execute.
We can think about promises as “WHAT” we want to fire after an operation is completed while deferred controls “WHEN” and “HOW” those promises will execute.
“$q” is the angular service which provides promises and deferred functionality.

24. In 30 seconds, define AngularJS?
Answer: AngularJS is an open-source JavaScript framework designed for creating dynamic single web page applications with fewer lines of code.

25. Mention some advantages of using AngularJS framework?
Answer:

Some of the key advantages of using AngularJS framework include:

It provides a great “desktop-like” experience to the end-user.
By freeing the developer from having to register callbacks manually or write repetitive low-level DOM manipulation tasks, it saves months of development.
By separating DOM manipulation from app logic, it makes code modular and easy to test.
It supports two-way data binding.

26. Which are the common ways of communication between modules of your application, using core AngularJS functionality?
Answer:

The common ways of communication include:

Using events
Using services
By assigning models on $rootScope
Directly between controllers using controllers and other forms of inheritance (E Learning)
Directly between controllers using $parent, $childHead, $nextSibling.

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

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

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

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

You can combine these restrictions to produce needed results.

29. Explain what a digest cycle is in AngularJS?
Answer: During every digest cycle, all new scope model values are compared against the previous values. This is called dirty checking. If change is detected, watches set on the new model are fired and another digest cycle executes. This goes on until all models are stable.

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

30. Explain what the link function is and how it differs from compile?
Answer:

The link function combines the directives with a scope to produce a live view.

The link function is responsible for instance DOM manipulation and for registering DOM listeners.

The compile function is responsible for template DOM manipulation as well as the collection of all the directives.

31. Explain e2e testing of AngularJS applications?
Answer: End-to-end (e2e) testing involves testing an application from start to finish to determine whether all the components are working properly. It catches issues within an application related to integration and flow.

32. What is dependency injection?
Answer: Dependency injection is the process where the dependent objects are injected rather than being created by the consumer.

33. How Do You Exchange Data Among Different Modules Of Your Angular JS Application?
Answer:

There are a no. of ways in Angular to share data among modules. A few of them are as follows.

The most common method is to create an Angular service to hold the data and dispatch it to the modules.
Angular has a matured event system which provides $broadcast(), $emit() and $on() methods to raise events and pass data among the controllers.
We can also use $parent, $nextSibling, and $ controllerAs to directly access the controllers.
Variables defined at the root scope level ($rootScope) are available to the controller scope via prototypical inheritance. But they behave like globals and hard to maintain.

34. What are the features of Node.js?
Answer: Node.js is a single-threaded but highly scalable system that utilizes JavaScript as its scripting language. It uses asynchronous, event-driven I/O instead of separate processes or threads. It is able to achieve high output via single-threaded event loop and non-blocking I/O.

35. Why is Node.js Single-threaded?
Answer: Node.js is single-threaded for async processing. By doing async processing on a single-thread under typical web loads, more performance and scalability can be achieved as opposed to the typical thread-based implementation.

36. What are the benefits of dependency injection?
Answer: Dependency injection has two major benefits: Testing and decoupling.

37. What is Node.js? Where can you use it?
Answer: Node.js is server-side scripting based on Google’s V8 JavaScript engine. It is used to build scalable programs especially web applications that are computationally simple but are frequently accessed.

You can use Node.js in developing I/O intensive web applications like video streaming sites. You can also use it for developing: Real-time web applications, Network applications, General-purpose applications, and Distributed systems.

38. Why use Node.js?
Answer:

Node.js makes building scalable network programs easy. Some of its advantages include:

It is generally fast
It almost never blocks
It offers a unified programming language and data type
Everything is asynchronous
It yields great concurrency

39. What is the Single Page Application (SPA)?
Answer: SPA is the concept whereby pages are loaded from the server not by doing postbacks, rather by creating a single shell page or master page and loading the web pages into the master page.

40. How can digest cycle time be decreased?
Answer:
Digest cycle time can be decreased by decreasing the number of watchers. To do this you can:

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

41. How can the SPA be implemented in AngularJS?
Answer: SPA can be implemented with Angular by using Angular routes.

42. What Are The Form Validations Supported By AngularJS?
Answer: AngularJS allows form validation on the client-side in a simplistic way. First of all, it monitors the state of the form and its input fields. Secondly, it observes any change in the values and notifies the same to the user.
Let’s discuss the different input field validations along with examples.

A) Required Field Validation.
By using “Required Field” validation we can prevent, form submission with a null value. It’s mandatory for the user to fill the form fields.

43. Which is the first argument typically passed to a Node.js callback handler?
Answer: Typically, the first argument to any callback handler is an optional error object. The argument is null or undefined if there is no error.

Error handling by a typical callback handler could be as follows:

function callback(err, results) {
// usually we’ll check for the error before handling results
if(err) {
// handle error somehow and return

// no error, perform standard callback handling

44. What are the functionalities of NPM in Node.js?
Answer:

NPM (Node Package Manager) provides two functionalities:

An online repository for Node.js packages
Command-line utility for installing packages, version management and dependency management of Node.js packages

45. What is the difference between Node.js and Ajax?
Answer: Node.js and Ajax (Asynchronous JavaScript and XML) are the advanced implementations of JavaScript. They all serve completely different purposes.

Ajax is primarily designed for dynamically updating a particular section of a page’s content, without having to update the entire page.

Node.js is used for developing client-server applications.

46. Explain chaining in Node.js?
Answer: Chaining is a mechanism whereby the output of one stream is connected to another stream creating a chain of multiple stream operations.

47. What are “streams” in Node.js? Explain the different types of streams present in Node.js?
Answer:

Streams are objects that allow the reading of data from the source and writing of data to the destination as a continuous process.

There are four types of streams.

to facilitate the reading operation
to facilitate the writing operation
to facilitate both read and write operations
is a form of Duplex stream that performs computations based on the available input.

Note: Browse latest AngularJs Interview Questions and Angular Tutorial Videos. Here you can check Angular Training details and Angularjs Training Videos for self learning. Contact +91 988 502 2027 for more information.

All AngularJS Interview Questions