AngularJS Interview Questions And Answers - Part One

Shiva Shukla
7y
14.4k
0
4

Article

Question: What is AngularJS & what is its use in web development?

Answer

AngularJS is a structural client side open-source JavaScript Framework developed by Google.

As we know that AngularJS follow the MVW* pattern and it allows us to build well-structured testable & maintainable front end applications.

Its uses:

AngularJS helps us to create single page (one page) application with the help of HTML, CSS, and JavaScript on the client side.
AngularJS allows us to create custom directive which are reusable component & abstract your DOM manipulation.
It supports two-way data binding.by help of two way data binding model will be updated the view without any DOM manipulation.
It supports services & dependency injection which can easily inject in our controller & provide some utility code as per our requirement.

Question: What are the features used in AngularJS & why?

Answer

AngularJS supports some features that have uses for creating web apps.

AngularJS Feature

Module: It is like a container for different components.
Directive: It is combination of AngularJS template markups and supporting java script code.
Template: It is a combination of html, directive, filters & attribute.
Scope: It is java script object that refers to the application module.
Expression: It is much like JavaScript expression. It uses {{Expression}} to show data in html.
Data binding: Data binding is synchronized data between model & view.
MVC Pattern: MVC pattern also called model view controller.
Validation: AngularJS provides you built in validation directive to validate from client side.
Filters: It is used for format data before display users.
Services: It calls reusable business logic.
Routing: It helps you to divide your app in multiple views and bind different view to controllers.
Dependency Injection: It is software design pattern that deals with how component get hold of their dependencies.
Injector: Container of dependency injection.
Testing: Unit test doesn't need to load all the app, just loading that specific module is enough to start unit testing.

Question: What is Module & why do we use it?

Answer

It is a container. It divides apps into small components whose reusable, functional component that are integrated with other components.

It has the place where we write AngularJS code for web apps.
Each module is identified by a unique name and can be dependent on other module.
It is the place where we define dependencies.
AngularJS module is single in every web page.

Why we use Module

Modules are used to separate logics say services, controllers, application etc. and keep the code clean.
We define modules in separate Js files and name them as per the module. Js file.

Question: Explain controller inheritance with example?

Answer

Controller inheritance also works as like scope inheritance works. Implementing in controller inheritance the child controller will inherit prototypically from its parents scope, so when we are need to reuse that functionality from parent controller all you need to add is required method to the parent controller.

Example:

<script type="text/javascript">
Module.controller('ParentCtrl', function ($scope)
{
$scope.$broadcast('event', args);
$scope.$on('event-response', function (result) {});
});
Module.controller('ChildCtrl', function ($scope)
{
$scope.$on('event', function (args)
{
var result;
$scope.$emit('event-response', result);
});
});
</script>

Question: Can you describe config () & run () method & why we use it?

Answer:

Config: Config block using for block creating in AngularJS.it will executed as provider register. It can only inject provider & constant in configuration block.
Run: It use to put event handler at root lavel. Run block executed after configuration block.it inject instance & constants.it is like as c,c++ main method.

Question: What is Dependent Module & which module load first?

Answer

Dependent module is that which is dependent on other modules in AngularJS. Dependent module is loaded by AngularJS as per requirement.

Dependent module is loaded first before requremodule loaded on AngularJS.

Example:

<script type="text/javascript">
angular.module('App', []);
angular.module('App', ['dependentModule1', 'dependentModule2']);
</script>

Question: Can you define restrict option in directive & can we define it multiple in AngularJS custom directive?

Answer

Restrict option specify us how will you invoke your directive in your AngularJS app.

They are attribute, class, element& comment.

Attribute: It denoted by “A” it is like as-<span my-directive></span>
Class: It denoted by “c” it is like as-<span class=“my-directive: expression ;”>< /span>
Element: It denoted by “E” it is like as-<my-directive></my-directive>
Comment: It denoted by “M” it is like as-<!—directive: my-directive: expression-->

Yes we define multiple restrict option in AngularJS app.

As- restrict:’EAC’

Question: Why you use ng-show, ng-hide & how it is different from each other?

Answer

ng-show & ng-hide is used for showing html elements in AngularJS; it is based on AngularJS expression. When expression goes true ng-show operation perform other wise ng-hide operation perform.

As:

<!DOCTYPEhtml>
<html>
<head>
<title></title>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/AngularJS/1.3.14/angular.min.Js">
</script>
</head>
<body>
<h3>ng-show & ng-hide</h3> <br/>
<script>
var app = angular.module("app", []);
app.controller("MyCtrl", function ($scope)
{
$scope.data = {};
$scope.data.isShow = true;
$scope.data.isHide = true;
});
</script>
<div ng-controller="MyCtrl">
<div ng-show="data.isShow">ng-show Visible</div>
<div ng-hide="data.isHide">ng-hide Invisible</div>
</div>
</body>
</html>

Question: Why do you use ng-include & what is its actual meaning in AngularJS?

Answer

Ng-include are used for external html fragment for other file in html template view.

Ng-include is an AngularJS directive.

Question: Explain about data binding?

Answer

Data binding is used for codeless writing and performing good operation in AngularJS. With the help of data binding the developer has no more responsibility for manual manipulation on DOM elements and attributes for reflection change in model or view.

AngularJS provides two-way data binding with help of that, you can easily changes your reflection corresponding with model and view.

It has two types:

One way data binding: it works manually not reflect any changes.
Two way data binding: it works automatically it reflects changes on model & view.