AngularJS Interview Questions and Answers

1. Explain what you know about Angular JS in short?

The Angular JS is a JavaScript framework that is used for creating primarily single web page applications. This allows you to use the HTML as your template language and allows you to extend the HTML’s syntax for expressing your application’s components clearly.

2. What do you mean by Service in AngularJS?

The Angular JS services are singleton objects or functions that are used for carrying out specific tasks. This holds some business logic and these functions are also called directives, controllers, and filters.

3. Explain Data binding in AngularJS?

Data Binding is the automatic synchronization of data between view components and models. Example – ng-model directives that are used in data binding.

4. What is the controller in AngularJS?

Controllers are the JavaScript functions that are bounded for a particular scope. It is the prime actors in the AngularJS framework and they carry functions for operating on data and to decide which view that is going to be updated.

5. What are the key features of AngularJS?

Given below are the key features of AngularJS

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

6. With multiple options on the page load, how do you initialize the select box?

We can initialize the select box with options on the page loading using the ng-init directive.

7. What is the role of filters in AngularJS?

Filters select the subset of items from the array and return to a new array. The filters are used for showing filtered items from the list of items based on the defined criteria.

8. List the advantages of using AngularJS?

The advantages of using Angular JS are as follows,

• It supports MVC pattern
• AngularJS can perform two ways of data binding.
• AngularJS has a predefined form of validations.
• This supports both client-server communication.
• Angular JS also supports Animations. 

9. What are directives in AngularJS?

The Directive introduces a new syntax and they are like the markers on the DOM element that attaches a special behavior for it. For any Angular JS application, the directives are the most important components.

10. Elucidate templates in AngularJS.

The Templates in Angular are written with HTML and that contains Angular -Specific elements and attributes. Those templates are combined with information that is coming from the controller and model that are further rendered for providing a dynamic view to the user. These are the Basic AngularJS Interview Questions that are put forth to a fresher in an Interview.

11. What are the commonly used directives in AngularJS? applications?

The commonly used directives are as follows,

• ng-App
• ng-bind
• ng-show
• ng-model
• ng-repeat

12. What do Angular JS routes do?

The Angular JS routes enable us to create various URLs for multiple contents in your application. The different URLs for various content allows users to bookmark URLs to the specific content. All such bookmarked URL in AngularJS is called as a route.

13. What are the types of Data Binding?

There are two types of Data Binding and they are,

• Data Binding in Angular Templates.
• Data Mining in classical template systems.

14. Explain what is deep linking in AngularJS?

Deep Linking in AngularJS allows us to encode the state of applications on the URL so it can be bookmarked. These applications can later be restored from a URL to a similar state.

15. What features make AngularJS better?

Below are the features that make the Angular JS better,

• Registering Callbacks
• No initialization codes
• Transfers the data and from the UI
• Controls the HTML DOM programmatically.

16. What is string interpolation in AngularJS?

In Angular JS a compiler during the compilation process matches the text and attributes using the interpolate service to see whether they contain embedded expressions. It is part of the normal digest cycle and these expressions are updated and registered as watches.

17. What are the steps used for the compilation process of HTML that happens?

The compilation of HTML process occurs in the following ways, By using the standard browser API, the HTML is parsed as DOM. On using the call to the $ compile() method, the compilation of DOM is performed. This method traverses the DOM and matches the directives. Linking the templates with a scope by calling the linking functions is returned from the previous step.

18. What is the ng-app directive?

ng-app directive defines links to the AngularJS application to the HTML. This also indicates the start of an application.

19. What is MVC?

Model View Controller is also called as MVC popularly. It is a software design pattern that is used for developing web applications. The Model View Controller pattern is made on the following three parts,

• Model: Model is the lowest level of the pattern and this is responsible for maintaining the data.
• View: This is responsible for displaying all portions of the data to a user.
• Controller: It is the software code that controls the interactions between the View and Model.

20. What are the types of Directives?

There are four types of Directives,

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

These are the Basic AngularJS Interview Questions that are asked to a fresher in an Interview.

21. Explain any three core directives of AngularJS briefly?

The following are the three core directives of the Angular JS

• ng-bind – It is the directive that binds the Angular JS Application
• to HTML.
• ng-app – It is the directive that defines and links the AngularJS application to HTML.
• ng-model- These are the directives that bind the values of Angular JS application data for the HTML input controls.

22. What is a Linking function and list the types of Linking function?

The Link combines the directives with the scope and produces a live view. To register DOM listeners and updating the DOM link functions are responsible. Once the template is cloned it is executed. There are two types of Linking they are,

• Pre-Linking functions
• Post Linking functions.

23. Distinguish between AngularJS and Angular.

24. What is Annotation?

The Annotation in Angular is the “only” metadata set of a class using a Reflect Metadata library. It is used for creating an annotation array.

25. What is Decorator in AngularJS?

The Decorator is the design pattern that is used for separating the decoration or modification of the class without altering the actual source code.

26. What is a factory method in AngularJS?

Factory Method is used for creating the directive. This is only invoked once if the compiler matches with directives for the first time. We can also invoke the factory method by using the $injector.invoke.

27. List the styling form that ng Model adds to the CSS classes?

Below are the ngmodel that adds to the CSS classes.

• ng- valid
• ng- invalid
• ng-pristine
• ng-dirty

28. What is the boost process in AngularJS?

If a page is loaded in the browser the following things occur,

• The HTML document is loaded on the browser and it is evaluated by the browser. The Angular JS JavaScript file is loaded -> angular global object is created. Then, JavaScript that registers the controller function is executed.
• Now, the Angular JS scans through HTML to look for the Angular JS apps and views. If the view is located, then it is connected to that view and the corresponding controller function.
• The Angular JS executes a controller function. Later it renders views with data from the model that is populated by the controller. Now the page gets ready.

29. Explain the types of Linking functions in detail?

• Pre-Linking function: The Pre-Linking functions are executed before the child elements are linked. Also, this is not considered a safe way for a DOM transformation.
• Post-Linking functions:  These functions are executed after child elements are linked. This is safe to do a DOM transformation by a post-linking function.

30. Elucidate injector in AngularJS?

The injector is the service locator. This is used for retrieving the object instances that are defined by the provider, invoke methods and load modules and instantiate types. In Angular, there is a Single injector for every Angular application and it helps to look up the object instance by its name itself.These are the Common AngularJS Interview Questions that are asked to a fresher in an Interview.

31. What are the characteristics of “Scope”?

Given below are the characteristics of ” Scope”,

• For observer model mutation the scope provides an APIs($watch)
• For propagating any model changes via systems to view from the outside of the Angular realm.
• The scope inherits the properties from its parent scope. When providing access to the shared model properties, the scope could be nested to isolate the application components.
• The Scope provides a context against which the expressions are evaluated.

32. Write the difference between compile and link in AngularJS?

33. Where is Angular is used mainly for?

The Angular is typically used in the development of Single Page Applications(SPA). The Angular provides the set of ready-to-use modules that simplifies the development of the single-page applications. Besides this, it provides features such as built-in data streaming, a modular CLI, and type safety. Generally, the Angular is regarded as the full-fledged web framework.

34. What do you mean by Angular Expressions?

The Angular expressions are the code snippets that are usually placed in the binding like {{expression}} that are similar to JavaScript. Also, these expressions are used in binding application data to HTML Syntax:{{expression}}.

35. What do you mean by a provider in Angular?

The provider is the configurable service in Angular. This is the instruction to a Dependency Injection system which provides information about how to obtain the value for dependency. This is the object that has a $get() method and it is used to create a new instance of the service. The Provider could also contain additional methods and use the $ for registering new providers.

36. Explain briefly about Scope in Angular?

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

37. What is the step to configure the Angular App(ng-app)?

For setting up the Angular App we should follow a few steps and they are,

• First, create an angular.module.
• The controller would be assigned to that module.
• The module would be linked with an HTML template like (UI or View) with the angular app (ng-app).
• These HTML templates would be linked with the controller JS with the ng-controller directive.

38. What are Cookies in AngularJS?

Cookies Stores the data which has to be sent back to a server with some requests. A cookie’s expiration differs on the types and duration set from either the client-side and server-side. The maximum size that could be stored is less than 4KB.

39. What are the types of Directive scopes in AngularJS?

Three types of directive scopes are available in Angular JS and they are

• Parent Scope
• Child Scope
• Isolated Scope

40. What is Session Storage and Local Storage?

• Session Storage: The data are generally stored for a particular session. Those data would be lost if the browser tab is closed after a particular session. The maximum size that could be stored here is up to 5MB.
• Local Storage: The data stored here is with no expiration date. The data could be cleared by JavaScript or by clearing the browser cache. The Storage limit is maximum compared to the session storage and cookie. These are the Basic AngularJS Interview Questions that are asked to a fresher in an Interview.

41. Do Angular supports nested controllers?

Yes. The Angular supports the concepts of nested controllers. The nested controller is required to define a hierarchical manner for using the View.

42. What is the role of $route Provider in AngularJS?

This is a $route provider that helps in navigating between various links/pages without separately loading the link/page whenever a user clicks on the link. ngRoute config() is used for configuring the routeProvider.

43. Write the ways you can communicate between the application modules using the core Angular functionality?

Given below are the common ways for communicating between the application modules and using core Angular functionality

• Using events
• Using services
• Assigning models on $rootScope
• Directly between controllers [$parent, $$childHead, $$nextSibling.]
• Directly between controllers [ControllerAs and other forms of inheritance]

44. What is the basic distinction between $scope and scope?

The $scope is used in Angular JS for achieving dependency injection and the scope is used to link between View (HTML) and Controller(JS).

45. Differentiate between Angular expressions and JavaScript expressions.

46. Where could we implement the DOM manipulations in the AngularJS?

Manipulations of DOM are the directives. Besides, it should not exist in the controller’s services or anywhere else.

47. What is the concept of Scope Hierarchy?

$Scope objects in the Angular are organized into a hierarchy and are majorly used by views. This contains a root scope that can further contain scopes which are known as child scopes. Also, one root scope could contain one or more child scopes. Here every view has its own $scope and the variables that are set by the view controller would remain to other controllers.

48. How does the Scope Hierarchy look like?

The Scope hierarchy usually looks like

• Root $scope
• $scope for Controller 1
• $scope for Controller 2
• ..
• $scope for Controller ‘n’

49. How should we show the scope variable that it should have one-time binding only?

For showing one-time binding we should use “::” before the scope.

50. What is an AOT?

AOT acronym stands for the Angular Ahead-of-Time compiler. This is used for pre-compiling application components along with their templates while building process. Angular Applications that are complied with AOT have a smaller launching time. The components of these applications could be executed immediately without the approval of the client-side compilation. The AOT compiler could discard the unused directives and are further thrown out using the tree-shaking tool. These are the Common AngularJS Interview Questions for fresher in an Interview.

51. What is the ng-bind template and ng-non-bindable template?

ng-bind -templates: This replaces the text content of an element by the interpolation of the template. This contains multiple double curly markups. <ANY ELEMENT ng-bind-template= ” {{expression1}} {{expression2}} … {{expression n}} “> </ANY ELEMENT> Ng-non-bindable: This specifies Angular JS not to compile the content of the HTML element and their child nodes. <ANY ELEMENT ng-non-bindable > </ANY ELEMENT>

52. Write the syntax of the Factory method in AngularJS?

The Syntax of Factory method is , module.factory(‘factoryName’, function);

53. What are the types of components where we could create custom directives?

The Angular provides support for creating custom directives for the following:

• Element directives − Directive activates when the matching element is encountered.
• Attribute − Directive activates if a matching attribute is encountered.
• CSS − Directive activates while a matching CSS style is encountered.
• Comment − Directive activates if the matching comment is encountered

54. What is the life cycle of the Digest Cycle in Angular?

The lifecycle of the Digest Cycle in Angular is,

• DOM Event
• Start from root scope
• Checking all scope variables
• More Scope
• Render DOM.

55. What is AngularJS Global API?

It is the combination of a global JavaScript function that is used for performing tasks such as comparing iterating objects, objects and converting data. The common API functions are as follows

• angular.lowercase: This converts the string to lowercase string.
• angular.uppercase: This converts the string to an upper case string.
• angular.isString: This will return true if the present reference is a string.
• angular.isNumber: This will return true when a current reference is a number.

56. Write the Syntax for Provider method in AngularJS?

The Syntax for Provider method in Angular JS is serviceApp.provider(“logService”, function ())

57. What are the types of filters in Angular?

Given below are the various filters that are supported by the Angular JS,

• Currency
• Date
• Filters
• JSON
• Limit
• Lower case
• Number
• Order By
• Upper Case.

58. Write the syntax for creating the new date object?

The syntax for creating the new date object is given below: $scope.newDate=new Date();

59. How would you disable the control or element in the AngularJS?

By using ng- disabled attribute we can disable or control the element in AngularJS.

60. How will you create a Service in AngularJS?

For creating a service in Angular JS it is created by registering it with a module in which it is going to be operated. The three ways to create Angular Service are:

• Factory
• Service
• Provider

These are the Basic AngularJS Interview Questions that are asked to a fresher and experienced candidate in an Interview.

61. What is the difference between AngularJS and Backbone.js?

An AngularJS coordinates the functionalities for many 3rd party libraries. Also, it supports the individual functionalities that are required to develop HTML5 Apps. Whereas the Backbone.js do their jobs or functions independently.

62. Elucidate jQlite

The jQlite is also called jQuery lite is the subset of jQuery which contains all the features. This is packaged within Angular JS by default. This helps the Angular to manipulate the DOM in a way that is compatible with the cross-browser. jQlite usually implements the most commonly required functionality that results in having a small footprint.

63. What are the features supported by Angular and jQuery?

Given below table will clearly explain what are all the features that are supported by Angular and jQuery

64. What is the web browser does the Angular JS is well -suited with?

It is compatible with browsers such as Safari, Mozilla, Chrome, Opera and IE and also with Mobile browsers as well. Answer: Yes, it is companionable with all browsers like Safari, Chrome, Mozilla, Opera, IE as well as Mobile browsers.

65. What is the use of $ watch?

The $watch is used for keeping track of the old and new value of the watched expressions.

66. Explain the purpose of the $root scope?

The $root scope is used in communicating between various controllers of an application. Also, AngularJS could have only one rootScope for each app.

67. What is the purpose of ng-init?

The Ng-init is used in cases where we require some action to be performed before the initialization of a part of the DOM element.

68. Could the parent controller access the methods of a child controller or vice versa?

The parent controller is not capable of accessing the methods of a child controller. But the child controller could access the methods of a parent controller.

69. Can we use a ternary operator in Angular Expression?

Yes, we can use the ternary operator in an Angular Expression. Also, we could use the no flow operator in it. {{name==undefined:’no name specified’?name}}

70. Elucidate the Architecture of AngularJS?

The Angular JS is architectured on three components and they are

• The Template (View)
• The Scope (Model)
• The Controller (Controller)

Also, AngularJS extends HTML attributes with the Directives and binds data to HTML Expressions. These are the Common AngularJS Interview Questions that are asked to a fresher and experienced candidate in an Interview.

71. What is UI Routing in AngularJS?

This is the routing framework that is used in Angular JS and it provides a different approach compared to ngRoute. This changes the application view based on the state of an application and not just the route URL.

72. What is ng-include directive in AngularJS?

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

73. What are Events in Angular JS and list the events you know in AngularJS?

Angular JS frameworks include few directives that are used in providing the custom behavior on various DOM events. Few of the events are listed below,

• ng-click
• ng-keyup
• Ng-dblclick
• ng-change
• ng-keydown
• ng-keypress
• ng-mousedown
• ng-mouseleave
• ng-mouseenter

74. Explain how will you do Animation in AngularJS?

For animating an application, we should include AngularJS Animate Library and later refer to the ngAnimate module to the application or add the ngAnimate as a dependency in the application module.

75. How would you send the HTTP post request in AngularJS?

In AngularJS, $http.post method is used in sending the https post request. Also, this method has three parameters and they are URL, Config, and Data.

76. How will you use Multiple ng-app within the page in AngularJS?

We can use the Multiple ng-app within the page in two ways and they are

• Bootstrap method
• ngModules Directives.

77. What are the methods that are supported by $http service in AngularJS?

Few of the methods that are supported by $http service are as follows

• GET
• HEAD
• POST
• PUT
• DELETE
• CONNECT
• OPTIONS
• TRACE

78. What is the locale ID in AngularJS?

The locale is a specific geographical region. It is commonly used in locale ID that comprises two parts which are the language code and the country code.

79. What is the role of DDO in AngularJS?

The term DDO stands for Directive Definition Object. It is used while creating the custom directive in the AngularJS.

80. What do you mean “track by” in Angular JS and how it works?

A “track by” is used with an ng-repeat and this describes to AngularJS how to track the association between the Model and the DOM. This primarily improves rendering performance. These are the Basic AngularJS Interview Questions that are asked to a fresher in an Interview.

81. Explain an Interceptor in Angular and its uses?

The interceptor is the middleware code in the AngularJS where each $http requests go through. This is attached with $http Provider service and allows us to intercept the response and request objects. The Interceptor Middleware is used for authentication, handling the error and other filters that you want to apply on the response or request.

82. Differentiate between a Stateful and Stateless component in the AngularJS?

83. Mention the inbuilt services in AngularJS?

The Angular JS has 30 inbuilt services in them. Few of them are listed below,

• $http
• $scope
• $timeout
• $interval
• $window
• $location

84. How would you validate the URL in the AngularJS?

By adding the regex directly to an ng pattern and the attribute could help us in validating the URL in AngularJS.

85. Elucidate how the logs are maintained in AngularJS?

The logs could be maintained using $log services. The major purpose of $log service is to help in troubleshooting and debugging This is done with the help of the below methods.

• log()- It is used for writing a log message in the console.
• info()- This writes an information message.
• warn()- It is used in writing a warning message.
• error()- This writes an error message.
• debug()- It is used for writing a debug message.

86. Write the Syntax for a set, get, and clear cookies in the AngularJS?

The Angular JS has a module that is known as ngCookies. We should inject ngCookies before including angular-cookies to the application

• Set Cookies

We should use the put method to set the cookies in the key-value format. $cookies.put(“username”, $scope.username);

• Get Cookies

By using the get method we can get cookies. $cookies.get(‘username’);

• Clear Cookies

We should use the remove method for removing or clearing the cookies. $cookies.remove(‘username’);

87. What are the popular Angular JS Extensions/ IDE Plugins that are used for Web Development?

Given below are the list of Extensions/ Plugins IDE that enhances the way you code with the Angular JS:

• ATOM
• Eclipse
• Brackets
• TextMate
• Netbeans
• WebStorm
• Netbeans
• Sublime Text
• Visual Studio 2012/2013 Express or higher

88. Explain the use of Ng-View in Angular?

An ng-view tag creates the placeholder where the HTML or the ng-template view could be placed based on configuration.

89. Name the different variables used with an Ng-Repeat Directive?

The”ng-repeat” directive has the set of unique variables that is useful when iterating the collection. The variables are as follows.

• $index
• $first
• $middle
• $last

The “$index” consists of the index of an element that is used for the traversal. The variables like $first, $middle and $last return the boolean value depending on the current item that is first, middle or last element in the collection.

90. Explain any three Built-In services of AngularJS?

• $http – It is used for making an Ajax call to get server data.
• $window – This provides a reference to the DOM object.
• $Log – It is used for logging.

These are the Basic AngularJS Interview Questions that are asked to freshers in an Interview.

91. Explain the dynamic route in AngularJS and how would you implement it?

The dynamic route is the typical approach to the server communication that is using the HTTP Server. To implement it, initially, we should write the config function which uses $http and $route provider for gathering all information on the available routes.

92. What is $evalAsync?

A $evalAsync is used for executing the expressions on a current scope at a later time and it makes no guarantees to when an expression would be executed.

93. Explain what is an Isolate Scope in Angular JS and why this is required?

This is the Scope that exists separately without any prototypal inheritance. It makes a component reusable and allows them to control the binding either one or two ways.

94. Explain What is Scopeless Controller and when to use them?

The Scopeless controllers have not any $scope injected. The properties and functions bind directly to the controller. The Scopeless controllers are used in a situation where a controller becomes complex on using the $scope for providing data.

95. Elucidate the use of ng-cloak directive in AngularJS?

This is used in preventing the Angular HTML template from being displayed in detail on the browser in the uncompiled form when the action is still loading. This is used in avoiding the undesirable flicker effect that is caused by the HTML template display.

96. What is the use of .config() method in AngularJS?

A .config() function is used in adding the configuration blocks to the module.

97. Explain Mocked Service in AngularJS and how to use it?

This is the most usual type of dependency that is used on the AngularJS application. The Service could be mocked in two ways either by getting an instance of the actual service using the inject block or by implementing the mock service using the $provide.

98. What is .run() method in AngularJS?

A .run() function is used for adding the run blocks on the modules.

99. What is $templateCache in AngularJS?

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

100. What do you mean by Angular JS prefixes $ and $$?

The Angular JS use those prefixes for preventing the accidental code collision with the user code. The $ prefix is used for public objects whereas $$ prefix is used for private objects. These are the Basic AngularJS Interview Questions that are asked to a fresher in an Interview.

101. How would you change the start and end symbols that are used for AngularJS expressions?

Passing a $interpolateprovider on the config could help us to change the start and end symbols that are used in the AngularJS expressions.