Dear readers, these Angular JS Interview Questions have been outlined specially to get you familiar with the nature of questions you'll experience during your interview for the subject of Angular JS. As per my experience, great interviewers barely plan to ask any specific question during your interview, normally questions start with some essential concept of the subject, and afterward, they proceed based on advance discussion and what you reply.

Q.1.) What is AngularJS?
A.1.) AngularJS is a framework to build large-scale and high-performance web applications while keeping them as easy-to-maintain. Following are the features of the AngularJS framework.

• AngularJS is a powerful JavaScript-based development framework to create RICH Internet Application (RIA).
  
• AngularJS provides developers options to write a client-side application (using JavaScript) in a clean MVC (Model View Controller) way.
  
• An application written in AngularJS is cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser.
  
• AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.
  

Q.2.) What is data binding in AngularJS?
A.2.) Data binding is the automatic synchronization of data between model and view components. ng-model directive is used in data binding.

Q.3.) What is the scope of AngularJS?
A.3.) Scopes are objects that refer to the model. They act as the glue between controller and view.

Q.4.) What are the controllers in AngularJS?
A.4.) Controllers are JavaScript functions that are bound to a particular scope. They are the prime actors in the AngularJS framework and carry functions to operate on data and decide which view is to be updated to show the updated model-based data.

Q.5.) What are the services in AngularJS?
A.5.) AngularJS comes with several built-in services. For example $https: service is used to make XMLHttpRequests (Ajax calls). Services are singleton objects which are instantiated only once in-app.

Q.6.) What are the filters in AngularJS?
A.6.) Filters select a subset of items from an array and return a new array. Filters are used to show filtered items from a list of items based on defined criteria.

Q.7.) Explain directives in AngularJS.
A.7.) Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives (ng-bind, ng-model, etc) to perform most of the tasks that developers have to do.

Q.8.) Explain templates in AngularJS.
A.8.) Templates are the rendered view with information from the controller and model. These can be a single file (like index.html) or multiple views in one page using "partials".

Q.9.) What is routing in AngularJS?
A.9.) It is the concept of switching views. AngularJS based controller decides which view to render based on the business logic.

Q.10.) What is deep linking in AngularJS?
A.10.) Deep linking allows you to encode the state of the application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.

Q.11.) What are the advantages of AngularJS?
A.11.) Following are the advantages of AngularJS.

1. AngularJS provides the capability to create Single Page Applications in a very clean and maintainable way.
   
2. AngularJS provides data binding capability to HTML thus giving users a rich and responsive experience.
   
3. AngularJS code is unit testable.
   
4. AngularJS uses dependency injection and makes use of separation of concerns.
   
5. AngularJS provides reusable components.
   
6. With AngularJS, the developer writes less code and gets more functionality.
   
7. In AngularJS, views are pure HTML pages, and controllers written in JavaScript do the business processing.
   
8. AngularJS applications can run on all major browsers and smartphones including Android and iOS-based phones/tablets.
   

Q.12.) What are the disadvantages of AngularJS?
A.12.) Following are the disadvantages of AngularJS.

1. Not Secure − Being a JavaScript-only framework, applications written in AngularJS are not safe. Server-side authentication and authorization are must to keep an application secure.
   
2. Not degradable − If your application user disables JavaScript then the user will just see the basic page and nothing more.
   

Q.13.) Which are the core directives of AngularJS?
A.13.) Following are the three core directives of AngularJS.

1. ng-app − This directive defines and links an AngularJS application to HTML.
   
2. ng-model − This directive binds the values of AngularJS application data to HTML input controls.
   
3. ng-bind − This directive binds the AngularJS Application data to HTML tags.
   

Q.14.) Explain the AngularJS boot process.
A.14.) When the page is loaded in the browser, the following things happen:
An HTML document is loaded into the browser, and evaluated by the browser. AngularJS JavaScript file is loaded; the angular global object is created. Next, JavaScript which registers controller functions is executed.
Next AngularJS scans through the HTML to look for AngularJS apps and views. Once the view is located, it connects that view to the corresponding controller function.
Next, AngularJS executes the controller functions. It then renders the views with data from the model populated by the controller. The page gets ready.

Q.15.) What is MVC?
A.15.) Model View Controller or MVC as it is popularly called, is a software design pattern for developing web applications. A Model View Controller pattern is made up of the following three parts:

1. Model − It is the lowest level of the pattern responsible for maintaining data.
   
2. View − It is responsible for displaying all or a portion of the data to the user.
   
3. Controller − It is a software Code that controls the interactions between the Model and View.
   

Q.16.) Explain ng-app directive.
A.16.) ng-app directive defines and links an AngularJS application to HTML. It also indicates the start of the application.

Q.17.) Explain ng-model directive.
A.17.) ng-model directive binds the values of AngularJS application data to HTML input controls. It creates a model variable that can be used with the HTML page and within the container control( for example, div) having ng-app directive.

Q.18.) Explain ng-bind directive.
A.18.) ng-bind directive binds the AngularJS Application data to HTML tags. ng-bind updates the model created by the ng-model directive to be displayed in the HTML tag whenever the user input something in the control or updates the HTML control's data when model data is updated by the controller.

Q.19.) Explain ng-controller directive.
A.19.) ng-controller directive tells AngularJS what controller to use with this view. AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is a JavaScript object containing attributes/properties and functions. Each controller accepts $scope as a parameter which refers to the application/module that the controller is to control.

Q.20.) How AngularJS integrates with HTML?
A.20.) AngularJS being a pure javaScript based library integrates easily with HTML.

Step 1 − Include angularjs javascript libray in the html page
<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

Step 2 − Point to AngularJS app
Next we tell what part of the HTML contains the AngularJS app. This done by adding the ng-app attribute to the root HTML element of the AngularJS app. You can either add it to html element or body element as shown below:
<body ng-app = "myapp">
</body>

Q.21.) Explain ng-init directive.
A.21.) ng-init directive initializes AngularJS Application data. It is used to put values to the variables to be used in the application.

Q.22.) Explain ng-repeat directive.
A.22.) ng-repeat directive repeats HTML elements for each item in a collection.

Q.23.) What are AngularJS expressions?
A.23.) Expressions are used to bind application data to HTML. Expressions are written inside double braces like {{ expression}}. Expressions behave in the same way as ng-bind directives. AngularJS application expressions are pure JavaScript expressions and outputs the data where they are used.

Q.24.) Explain the uppercase filter.
A.24.) The uppercase filter converts a text to upper case text.

In the below example, we've added an uppercase filter to an expression using pipe character. Here we've added an uppercase filter to print student names in all capital letters.
Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}

Q.25.) Explain lowercase filter.
A.25.) A lowercase filter converts a text to lower case text.

In the below example, we've added a lowercase filter to an expression using pipe character. Here we've added a lowercase filter to print student names in all lowercase letters.
Enter first name:<input type = "text" ng-model = "student.firstName">
Enter last name: <input type = "text" ng-model = "student.lastName">
Name in Upper Case: {{student.fullName() | lowercase}}

Q.26.) Explain currency filter.
A.26.) Currency filter formats text in a currency format.

In the below example, we've added a currency filter to an expression returning number using pipe character. Here we've added a currency filter to print fees using currency format.
Enter fees: <input type = "text" ng-model = "student.fees">
fees: {{student.fees | currency}}

Q.27.) Explain filter.
A.27.) The filter is used to filter the array to a subset of it based on provided criteria.

In the below example, to display only required subjects, we've used the subject name as a filter.
Enter subject: <input type = "text" ng-model = "subjectName">
Subject:
<ul>
   <li ng-repeat = "subject in student.subjects | filter: subjectName">
      {{ subject.name + ', marks:' + subject.marks }}
   </li>
</ul>

Q.28.) Explain order by the filter.
A.28.) order by filter orders the array based on provided criteria.

In the below example, to order subjects by marks, we've used orderBy marks.
Subject:
<ul>
   <li ng-repeat = "subject in student.subjects | orderBy:'marks'">
      {{ subject.name + ', marks:' + subject.marks }}
   </li>
</ul>

Q.29.) Explain ng-disabled directive.
A.29.) ng-disabled directive disables a given control.

In below example, we've added ng-disabled attribute to a HTML button and pass it a model. Then we've attached the model to an checkbox and can see the variation.
<input type = "checkbox" ng-model = "enableDisableButton">Disable Button
<button ng-disabled = "enableDisableButton">Click Me!</button>

Q.30.) Explain ng-show directive.
A.30.) ng-show directive shows a given control.

In below example, we've added ng-show attribute to a HTML button and pass it a model. Then we've attached the model to a checkbox and can see the variation.
<input type = "checkbox" ng-model = "showHide1">Show Button
<button ng-show = "showHide1">Click Me!</button>

Q.31.) Explain ng-hide directive.
A.31.) ng-hide directive hides a given control.

In below example, we've added ng-hide attribute to a HTML button and pass it a model. Then we've attached the model to a checkbox and can see the variation.
<input type = "checkbox" ng-model = "showHide2">Hide Button
<button ng-hide = "showHide2">Click Me!</button>

Q.32.) Explain ng-click directive.
A.32.) ng-click directive represents an AngularJS click event.

In below example, we've added ng-click attribute to a HTML button and added an expression to updated a model. Then we can see the variation.
<p>Total click: {{ clickCounter }}</p></td>
<button ng-click = "clickCounter = clickCounter + 1">Click Me!</button>l

Q.33.) How angular.module works?
A.33.) angular.module is used to create AngularJS modules along with its dependent modules. Consider the following example:
var main app = angular.module("mainApp", []);
Here we've declared an application mainApp module using angular.module function. We've passed an empty array to it. This array generally contains dependent modules declared earlier.

Q.34.) How to validate data in AngularJS?
A.34.) AngularJS enriches form filling and validation. We can use $dirty and $invalid flags to do the validations in a seamless way. Use novalidate with a form declaration to disable any browser-specific validation.

The following can be used to track errors.

• $dirty − states that value has been changed.
  
• $invalid − states that value entered is invalid.
  
• $error − states the exact error.
  

Q.35.) Explain ng-include directive.
A.35.) Using AngularJS, we can embed HTML pages within a HTML page using ng-include directive.

<div ng-app = "" ng-controller = "studentController">
   <div ng-include = "'main.htm'"></div>
   <div ng-include = "'subjects.htm'"></div>
</div>

Q.36.) How to make an ajax call using Angular JS?
A.36.) AngularJS provides $https: control which works as a service to make ajax call to read data from the server. The server makes a database call to get the desired records. AngularJS needs data in JSON format. Once the data is ready, $https: can be used to get the data from server in the following manner:

function studentController($scope,$https:) {
   var url = "data.txt";
   $https:.get(url).success( function(response) {
      $scope.students = response; 
   });
}

Q.37.) What is the use of $routeProvider in AngularJS?
A.37.) $routeProvider is the key service that sets the configuration of URLs, maps them with the corresponding HTML page or ng-template, and attaches a controller with the same.

Q.38.) What is $rootScope?
A.38.) The scope is a special JavaScript object which plays the role of joining the controller with the views. The scope contains the model data. In controllers, model data is accessed via the $scope object. $rootScope is the parent of all of the scope variables.

Q.39.) What is the scope hierarchy in AngularJS?
A.39.) Scopes are controllers specific. If we define nested controllers then child controller will inherit the scope of its parent controller.

<script>
      var mainApp = angular.module("mainApp", []);
      mainApp.controller("shapeController", function($scope) {
         $scope.message = "In shape controller";
         $scope.type = "Shape";
      });
      mainApp.controller("circleController", function($scope) {
         $scope.message = "In circle controller";   
      });
</script>

Following are the important points to be considered in the above example.
We've set values to models in shape controller.
We've overridden the message in the child controller circle controller. When "message" is used within a module of the controller circle controller, the overridden message will be used.

Q.40.) What is a service?
A.40.) Services are JavaScript functions and are responsible to do specific tasks only. Each service is responsible for a specific task, for example, $https: is used to make an ajax calls to get the server data. $route is used to define the routing information and so on. Inbuilt services are always prefixed with the $ symbol.

Q.41.) What is the service method?
A.41.) Using service method, we define a service and then assign method to it. We've also injected an already available service to it.

mainApp.service('CalcService', function(MathService) {
   this.square = function(a) { 
      return MathService.multiply(a,a); 
}
});

Q.42.) What are the differences between service and factory methods?
A.42.) Factory method is used to define a factory which can later be used to create services as and when required whereas service method is used to create a service whose purpose is to do some defined task.

Q.43.) Which components can be injected as a dependency in AngularJS?
A.43.) AngularJS provides a supreme Dependency Injection mechanism. It provides the following core components that can be injected into each other as dependencies.

• value
  
• factory
  
• service
  
• provider
  
• constant
  

Q.44.) What is the provider?
A.44.) provider is used by AngularJS internally to create services, factory, etc. during the config phase(phase during which AngularJS bootstraps itself). Below mention script can be used to create MathService that we've created earlier. Provider is a special factory method with a method get() which is used to return the value/service/factory.
//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };

   });
});

Q.45.) What is constant?
A.45.) constants are used to pass values at the config phase considering the fact that value cannot be used to be passed during the config phase.
mainApp.constant("configParam", "constant value");

Q.46.) Is AngularJS extensible?
A.46.) Yes! In AngularJS we can create a custom directive to extend AngularJS's existing functionalities.
Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using the "directive" function. A custom directive simply replaces the element for which it is activated. AngularJS application during bootstrap finds the matching elements and does a one-time activity using its compile() method of the custom directive then processes the element using the link() method of the custom directive based on the scope of the directive.

Q.47.) On which types of components can we create a custom directive?
A.47.) AngularJS provides support to create custom directives for the following types of elements.

• 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.
  

Q.48.) What is internationalization?
A.48.) Internationalization is a way to show locale-specific information on a website. For example, display content of a website in the English language in the United States and in Danish in France.

Q.49.) How to implement internationalization in AngularJS?
A.49.) AngularJS supports inbuilt internationalization for three types of filters currency, date, and numbers. We only need to incorporate corresponding js according to the locale of the country. By default, it handles the locale of the browser. For example, to use Danish locale, use the following script

<script src = "https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script>

Q.50.) What is the factory method?
A.50.) Using factory method, we first define a factory and then assign method to it.
var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {     
   var factory = {};  
   factory.multiply = function(a, b) {
      return a * b 
   }
   return factory;
}); 

Also Read:

Commonly Asked C# Interview Questions and Answers for Experienced and Freshers

Top 30 Android MCQ Questions and Answers with Explanation

Practice our complete set of quantitative and English