Angular JS Interview Questions and Answers
Angular JS is the widely used, open-source, structural JavaScript-based framework for developing large-scale, single-page, dynamic, and enterprise-level applications along with HTML syntax and MVC architecture. Angular JS is used to create responsive, easily maintainable, and cross-browser web applications. Angular JS is free and provides the option to focus on developing web applications and it is used by thousands of developers around the world. Here are the frequently asked AngularJs interview questions and answers that help freshers and experienced to ace the technical rounds easily.
1. Define Angular JS
Angular JS is a JavaScript-based framework that uses HTML for its template and HTML syntax for representing application components for writing client-side logic for web applications powered with MVC (Model-View-Control) architecture. It is used by developers to create large-scale, single-page, and enterprise-level applications for easily maintainable web pages.
2. List the features of Angular JS
The main features of Angular JS are testable applications, data-binding facilities, controllers, in-built services, scope with glue between the view and the controller, filters to provide customization, directives to customize HTML tags, routing, MVC pattern, and dependency injection.
3. What is the scope in Angular JS?
Scopes are objects in Angular JS that serve as a glue between the view and the controller. They refer to the model component of the MVC architecture and they are in a hierarchical way to imitate the DOM structure. They have built-in object $scope to get associated with application data and corresponding methods of the scope.
4. How can you represent services AngularJS?
Services are single objects that can be carried out tasks they are written for. They communicate with each other and are connected by using the Dependency Injection that helps the framework organize and share the code across the application. There are many in-built services offered by Angular JS and supported the creation of custom services that are used by global developers.
5. Define Directives
Directives are the important concepts of AngularJS elements that denote the DOM element markers offering new aspects to the DOM elements like elements name, attributes, comments, and CSS classes. They are used to create custom HTML tags that operate like custom widgets. Angular JS provides many in-built directives like ng-model for data binding, ng-repeat for iterating elements, ng-show and ng-hide for manipulating the display of DOM elements, and ng-app for bootstrapping AngularJS apps.
6. Explain data binding
The data binding process is used to automate the syncing of data between the view and the model components. Angular JS is using built-in directives like ng-model and ng-bind and ensures the model is the single point of truth for the view to sync with the model component. There are two types of data binding such as one-way data binding and two-way data binding.
7. Explain one-way data binding
The changes that are made in the model are reflected in the view, but the changes made in the view are not reflected in the model are referred to as one-way data binding and it is achieved using the ng-bind directive.
8. Explain two-way data binding
The changes made in the model are reflected in the view as well as the changes made in the view are reflected in the model is known as two-way data binding and it is achieved by the ng-model directive.
9. What is the purpose of interpolation in AngularJS?
An Interpolation is an event of binding data by embedding expressions to the attribute and text nodes. Angular JS uses interpolate built-in service to validate if there is any markup having embedded expressions and find whether they are updated and registered in the form of watches.
10. How to integrate AngularJS with HTML?
AngularJS can be integrated with HTML page by first binding the AngularJS library to the HTML page using the <script> tag in the HTML head part then bootstrapping the AngularJS application using ng-app directive and the codes are as follows
<html>
<head>
<script src = http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js></script>
<!- -other libraries–>
</head>
<! – – ng-app attribute to bootstrap AngularJS application – – >
<body ng-app = “SampleApp”
<! – – Web Page Elements – – >
</body>
</html>
11. What $rootScope in AngularJS application
The scope object created on the DOM element that contains the ng-app directive for bootstrapping the AngularJS application is referred to as $rootScope and this object is available for the whole application. All other scope objects are known as child scopes of the rootScope object.
12. What is the difference between ng-if and ng-show directives?
The ng-if directive will not render the DOM element portion when the condition is not satisfied, and the scope of the element will be destroyed if that is not rendered. The ng-show directive will render the DOM element and hide the display if the condition is not specified.
13. When will you use $watch?
The watch should be used when to keep track of the old and new values of the expressions or the model variable that is being watched.
$scope.$watch(“trackedVariable”, function (newValue, oldValue)
{
console.log(“Value Changed: “, newValue);
});
14. Define Scope Hierarchy
AngularJS has one $rootScope object and many child $scope object when every application is developed in AngularJS. If the new scope is created, it will be added to the parent scope and it will create a hierarchical structure like DOM structure in the result.
15. Explain about AngularJS module
An AngularJS module is a container used to monitor various components of the AngularJS application like controller, directive, filter, and service to the place where dependencies lie between them are defined. It will be treated as a main() method of Java. AngularJS module is created to use the module() method of the angular object. Following is the syntax to create the AngularJS module.
var app = angular.module(‘SampleApp’, []);
In this sample app module, we can define the controllers, constants, filters, or directives.
Example to define a controller
app.controller(“SampleController”, [‘scope’, function(obj)
{
obj.item = “Item 1”;
} ] );
16. What is the difference between expressions of AngularJS and JavaScript?
AngularJS expressions are the things inside double curly braces {{expression}} same as JavaScript and the main differences are the expressions of AngularJS are evaluated against the scope object, but the expressions of JavaScript are evaluated against the global window scope. The expression evaluation nature in AngularJS is forgiving and if something wrong, it returns null or undefined, but the expression evaluations of AngularJS are not forgiven in nature and return an error. Loops and conditional statements of AngularJS can’t be added as part of expressions, but the loops and conditional statements can be part of JavaScript expressions.
17. What are the scope characteristics of AngularJS?
Scope of AngularJS has 5 major characteristics as follows
- Scope provides the application with a context where the AngularJS expressions are evaluated
- Scope offers an option to observe the model changes within them using the $watch service.
- The scope objects provide APIs like apply to help in propagating the model changes for the entire application into the view from the sources such as controllers, services, or event handlers.
- Scope objects will inherit the parent properties to provide access to shared model properties.
- Scope can be nested to isolate directives and various AngularJS components.
18. How can you accomplish the mouse double click event in AngularJS?
AngularJS uses ng-dblclick directive to specify the custom behavior for mouse double click event. The ng-dblclick will not override the ondblclick event of JavaScript. Example usage of ng-dblclick directive,
<button ng-dblclick = “clicked = clicked + 1” ng-init = “clicked = 0”>
Double Click Event </button>
19. How to reset a $timeout and disable a $watch()?
To reset $timeout, we have to use .cancel() method in AngularJS.
var SampleTimer = $timeout (function()
{
/* statements */
}, 1000);
$timeout.cancel(SampleTimer);
To disable $watch, we should use the following syntax
var deregisterWatch = $scope.$watch (function()
{
/* statements */
});
deregisterWatch();
20. When should we use the findIndex() method and what does it return if the value is not found?
The findIndex() method is used to return the position of the element in any object and if the object is not found then the method returns -1.
Example
var index = $scope.objectList.findIndex(obj => obj.date == ‘2022-03-02’);
the result will be the index of the object where it has the date property that is equal to 2022-03-02.
21. Can a parent controller access the methods of the child controller?
No, it is not possible for the parent controller to access the properties and methods of the child controller.
22. Describe the given piece of code
<select ng-options = “employee.name for employee in employeeList”>
</select>
The above piece of code shows syntax error as it is not possible to use ng-option directives without using ng-model directives in AngularJS. It dynamically generates the <option> elements for the given <select> element by validating the expression within it. Now we should open the selecting an element from the dropdown and the option value needs to be bound to a model that is defined by the ng-model directive. Hence, the given piece of code results in an error as it has no ng-model directive.
23. What is the important use of the ‘track by’ in the ng-repeat directive?
The ng-repeat directive allows the user to keep track of all DOM elements dynamically to minimize DOM creation and rendering. It is done by storing the instances of the object if the new element has been added to the list or collection. Angular JS renders the newly added element instead of re-rendering of all collections and it helps in rendering the elements faster. If the ng-repeat directive operated on a collection that has the objects, it will have a unique identifier and the new elements will be tracked based on the id instead of new instance insertion. This will be achieved using track by the element of ng-repeat and the following is the sample piece of code.
<div> ng-repeat = “obj in objectList track by obj.id”>
<! – – statements – – >
</div>
24. What is the work of routing in AngularJS and how it works?
Routing in AngularJS allows the user to create URLs as per the various contents of the app and in turn, it enables the users of the application to bookmark the content according to the needs of the user. The route is the URL that is to be bookmarked and the routing helps in developing SPA (Single Page Applications) that the single-page HTML page to update them dynamically with user interactions. AngularJS supports routing using a routing module known as ngRoute and this module serves as per the URL. Whenever a user requests a particular route or URL, the routing engine known as $routeProvider renders the view based on the URL for defining the controller that acts on the view and based on the defined routing rules.
Example Snippet
var sampleApp = angular.module(‘routingExample’, [‘ngRoute’]);
sampleApp.config(function ($routeProvider)
{
$routeProvider.when(‘/’,
{
$templateUrl: ‘/login-page.html’,
controller: ‘loginPageController’
}). when(‘/employee/:empName’,
{
$templateUrl: ‘/employee-page.html’,
controller: ‘employeeController’
}). otherwise (
{
redirectTo: “/”
});
})
In this example, routing has been implemented and we should do the following steps:
- While creating the application module, pass ‘ngRoute’ as dependency module as follows
var sampleApp = angular.module(‘SampleRouting’, [‘ngRoute’]);
- Then, configure the routing rules for the application module using the config() method and by using $routeProvider service as the dependency.
- Finally, $routeProvider.when(path, route) method is used to configure the rules of routing for the first parameter defines the request URL and the second parameter defines the object that contains the template, controller, and other properties that are required to function for the requested URL.
- If the user requests for “login-page.html”, then inject login-page.html into the view and the loginPageController.
- For the URL “/employee/:empName” URL, the :empName denotes the URL parameter dynamically that is populated in the URL
- The statements under the otherwise() method are used to the default based on the URL for performing requests that are not part of the rules that have been configured.
25. Define the lifecycle hooks available in AngularJS?
Following are the lifecycle hooks that are available in AngularJS
- ngOnInit() is a callback method that gets invoked as soon as the change detector detects the scope model for the first time and before any view has been checked. It will be invoked only once when the directive is initiated.
- ngOnChanges() function is used to trigger when the AngularJS changes the scope model for us to define the actions that are to be followed up with the property changes. It will be called before ngOnInit() at the time of instantiating the directive and it is called every time the scope model gets updated.
- ngDoCheck() is a callback method that does the task of change-detection and it is invoked only after the default change-detector is running.
- ngAfterContentInit() is the callback method and it is used to complete the initialization of all content of the AngularJS directives.
- ngAfterContentChecked() is the method invoked once for AngularJS to set change-defaulter completes checking the content of AngularJS directives.
- ngOnDestroy() is used to clean up the component before the directives or the properties are destroyed and they are useful for avoiding memory leaks and helping users unsubscribe if any unnecessary observables have been detected.
- ngAfterViewChecked() is the method used to invoke immediately once the default change-detector completes one cycle of change-check.
Conclusion
Learn how to fasten the web development by enrolling in our best AngularJS Training in Chennai at Softlogic Systems and gain expertise in web development using the AngularJS framework to perform well in AngularJs interview questions and answers in top companies.
