Here are the top interview questions for AngularJS along with their answers:
1. Why should you opt for using AngularJS?
Ans. The following reasons will make you choose AngularJS as a web development framework:
It is based on the MVC pattern, which helps you to organize your web apps or web application accurately.
It expands HTML by affixing directives to your HTML markup with new attributes/ tags/ expressions to define compelling templates.
It also allows you to create your directives, making reusable elements that fill your requirements and abstract your logic of DOM manipulation.
It summarizes the behavioral pattern of your application in controllers, which are epitomized via dependency-injection.
It supports services that you can inject into your controllers to use some utility code to fulfill your needs. For instance, it offers $http service to facilitate communication with the REST service.
It allows dependency injection to help you test your angular app code very quickly.
Also, AngularJS is a mature community to help you. It has broad support over the internet.
2. Differentiate between "ng-show"/"ng-hide" and "ng-if" directives.
Ans. ng-show/ng-hide always inserts the DOM element but displays/hides it relying on the condition. ng-if will not enter the DOM element until it fulfills the requirement. ng-if is better when we require the DOM conditionally loaded because it will speed up page-loading compared to ng-show/ ng-hide. We only need to keep in mind what the difference between these directives is, so deciding which one to use depends on the task requirements.
3. What are the features of AngularJS?
Ans. The features of AngularJS are the following:
MVC (Model, View & Controller)
4. Name the AngularJS Filters?
Ans. Filters help in formatting data before it displays it to the user. You can use it in view templates, services, directives, and controllers. AngularJS provides built-in filters like Currency, Date, Number, OrderBy, Lowercase, Uppercase, etc. You can also create your filters.
5. What do you understand by Directives in AngularJS?
6. What is an auto bootstrap process in AngularJS?
Ans. Angular initializes automatically upon the DOMContentLoaded event or when you download the angular.js script to the browser, and the document.readyState is ready to complete. Now, AngularJS looks for the ng-app directive, which is the root of angular app compilation, and tells about the AngularJS part within DOM. When the ng-app instruction is found, then Angular will
load the module associated with the direction,
create the application injector
, and compile the DOM starting from the ng-app root element. This process is called auto-bootstrapping.
7. Define Scope in AngularJS?
8. What is the scope hierarchy?
Ans. The $scope object that the view uses in AngularJS are collected into a hierarchy. You will get a root scope, and the $rootScope can have one or more child scopes. Each controller has an individual $scope, which is a child of the $rootScope. Hence, whatever variables you create on $scope within the controller, these variables are accessible by the view based on this controller.
9. How can you share data between controllers?
Ans. You must initiate an AngularJS service that will hold the data and push it inside of the controllers.
Using service is the cleanest, fastest, and easiest way to test. There are also other means to implement data sharing between controllers, like:
– Using events– Using $parent, nextSibling, controllerAs, etc. to access the controllers directly
– Applying the $rootScope to add the data on
The methods above are all correct but are not the most efficient and easy to test.
10. Explain what is a "$scope" in AngularJS
Ans. Scope is an object referring to the application model. It is an execution context for expressions. Ranges are arranged in a hierarchical structure that mimics the DOM structure of the app. Scopes have the capability of watching expressions and propagating events. Scopes are objects referring to the model. They glue the controller with the view.
11. Explain the role of ng-app, ng-init, and ng-model directives.
Ans. The central role of these directives are as follows:
ng-app - Initialize the angular app.
ng-init - Initialize the angular app data.
ng-model - Bind the Html elements.