List of AngularJS interview questions to help you prepare for your AngularJS technical interview, Read the most frequently asked 100 top AngularJS Interview Questions and Answers for freshers and experienced pdf
51. What is scope in AngularJS?
A scope is an object that ties a view (a DOM element) to the controller. In the MVC framework, scope object is your model. In other words, it is just a JavaScript object, which is used for communication between controller and view.
52. What is $rootscope in AngularJS?
The $rootScope is the top-most scope. An app can have only one $rootScope which will be shared among all the components of an app. Hence it acts like a global variable. All other $scopes are children of the $rootScope. Since $rootScope is a global, which means that anything you add here, automatically becomes available in $scope in all controller. To add something in $rootScope, you need to use app.run function which ensures that it will run prior to the rest of the app. You may say that "run" function is like "main" method of angular app.
app.run(function($rootScope) {
$rootScope.name = "AngularJS";
});
And then you can use in your view. (via expression)
<body ng-app="myApp">
<h1>Hello {{ name }}!</h1>
</body>
53. What are controllers in AngularJS?
In Angular, a Controller is a JavaScript constructor function. When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. The job of a controller is to pass data from the model, to the view or the view can asks for something from the controller, and the controller turns to the model and takes that thing, and hands it back to the view.
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', function($scope) {
$scope.website = 'jquerybyexample.net';
}
]);
And then in your HTML using ng-controller directive,
<div ng-controller="MyController">
<h1>My website address is {{ website }}!</h1>
</div>
54. What is the difference between $scope and scope in AngularJS?
$scope is used while defining a controller (see previous question) where scope is used while creating a link function for custom directive. The common part is that they both refers to scope object in AngularJS, but the difference is that $scope uses dependency injection where scope doesn't. When the arguments are passed-in via dependency injection, their position doesn't matter. So for example, a controller defined as ($scope as first parameter)
myApp.controller('MyController', ['$scope', function($scope, $http) {
OR ($scope is second parameter)
myApp.controller('MyController', ['$scope', function($http, $scope) {
In both the case, the postion of $scope doesn't matter to AngularJS. Because AngularJS uses the argument name to get something out of the dependency-injection container and later use it.
But in case of link function, the position of scope does matter because it doesn't uses DI. The very first parameter has to be scope and that's what AngularJS expects.
app.directive("myDirective", function() {
return {
scope: {};
link: function(scope, element, attrs) {
// code goes here.
}
};
});
However you can name it anything of your choice. In below code, foo is your scope object.
link: function(foo, bar, baz) {
// code goes here.
}
55. What is MVC Architecture in AngularJS?
In AngularJS, scope objects are treated as Model. The View is display of model that is your data. And the model gets initialized within a JavaScript constructor function, called Controller in AngularJS. Let take a look at below code to understand it better.
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script>
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope',
function($scope) {
$scope.website = 'jquerybyexample.net';
}
]);
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<h1>My website address is {{ website }}</h1>;
</div>
</body>
</html>
Here MyController is a Controller and $scope (Model) is populated within Controller. And later on in div element $scope object data is displayed (View).
56. Can we have nested controllers in AngularJS?
YES. We can create nested controllers in AngularJS. Nested controller are defined in hierarchical manner while using in View. Take a look at below code. Here the hierarchy is "MainCtrl -> SubCtrl -> SubCtrl1".
<div ng-controller="MainCtrl">
<p>{{message}} {{name}}!</p>
<div ng-controller="SubCtrl">
<p>Hello {{name}}!</p>
<div ng-controller="SubCtrl2">
<p>{{message}} {{name}}! Your username is {{username}}.</p>
</div>
</div>
</div>
57. In case of nested controllers, does the $scope object shared across all controllers?
YES. The $scope object is shared across all controllers and it happens due to scope inheritance. Since the ng-controller directive creates a new child scope, we get a hierarchy of scopes that inherit from each other. So if we define a property on a parent scope, the child scope can manipulate the property. And if the property is not present in child scope, then parent scope property's value is used. Lets consider, the previous question HTML where there are 3 controllers. And here is the AngularJS code to define these controllers.
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope',
function($scope) {
$scope.message = 'Welcome';
$scope.name = 'Jon';
}
]);
myApp.controller('SubCtrl', ['$scope',
function($scope) {
$scope.name = 'Adams';
}
]);
myApp.controller('SubCtrl2', ['$scope',
function($scope) {
$scope.name = 'Ema';
$scope.username = 'ema123';
}
]);
You will see that the controller "SubCtrl2" doesn't have "message" property define but it is used in HTML. So in this case, the immediate parent scope property will be used. But immediate parent scope which is "SubCtrl" in this case, also doesn't have "message" property. So it again goes one level up and finds the property is present so it uses parent scope value for "message" property and displays it.
58. What are different ways of bootstrapping AngularJS?
is neat and superheroic JavaScript MVW (Model View Whatever) Framework which allows to extend HTML capabilities with Directives, expression, two way binding. In this post, we will see different ways of bootstrapping AngularJS. Bootstrapping in AngularJS is nothing but just the initialization of Angular app.
There are two ways of bootstrapping AngularJS. One is Automatic Initialization and other is Manually using Script.
When you add ng-app directive to the root of your application, typically on the <html> tag or <body> tag if you want angular to auto-bootstrap your application.
<html ng-app="myApp">
When angularJS finds ng-app directive, it loads the module associated with it and then compile the DOM.
Another way to bootstrapping is manually initializing using script. Manual initialization provides you more control on how and when to initialize angular App. It is useful when you want to perform any other operation before Angular wakes up and compile the page. Below is the script which allows to manually bootstrap angularJS.
<script>
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
</script>
If you have noticed, it is using document.ready which is great as it will make sure that before bootstrapping your DOM is ready. You don't need to inclued jQuery library reference here, as angularJS has within it. So angular.bootstrap function bootstrap angularJS to document. The second parameter is the name of module. You need to take care of following things while using manual process.
Remember angular.bootstrap function will not create modules on the go. So you need to have your modules define, before you manually bootstrap. So below is the correct approach. First define the module and then bootstrap.
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function ($scope) {
$scope.message= 'Hello World';
}]);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
</script>
You cannot add controllers, services, directives, etc after an application bootstraps.
59. What does SPA (Single page application) mean?
SPA is a concept where rather loading pages from the server by doing post backs we create a single shell page or master page and load the webpages inside that master page.
60. How can we create a custom directive in Angular?
Till now we have looked in to predefined Angular directives like “ng-controller”,”ng-model” and so on. But what if we want to create our own custom Angular directive and attach it with HTML elements as shown in the below code.
Hide Copy Code
<div id=footercompany-copy-right></div>
To create a custom directive we need to use the “directive” function to register the directive with angular application. When we call the “register” method of “directive” we need to specify the function which will provide the logic for that directive.
For example in the below code we have created a copy right directive and it returns a copy right text.
Please note “app” is an angular application object which has been explained in the previous sections.
app.directive('companyCopyRight', function ()
{
return
{
template: '@CopyRight questpond.com '
};
});
The above custom directive can be later used in elements as shown in below code.
<div ng-controller="CustomerViewModel">
<div company-copy-right></div>
</div>
Read More Angular JS Interview Questions:-
AngularJs Interview Questions Part1
AngularJs Interview Questions Part2
AngularJs Interview Questions Part3
AngularJs Interview Questions Part4
AngularJs Interview Questions Part5
AngularJs Interview Questions Part6
AngularJS Interview Questions and Answers List
51. What is scope in AngularJS?A scope is an object that ties a view (a DOM element) to the controller. In the MVC framework, scope object is your model. In other words, it is just a JavaScript object, which is used for communication between controller and view.
52. What is $rootscope in AngularJS?
The $rootScope is the top-most scope. An app can have only one $rootScope which will be shared among all the components of an app. Hence it acts like a global variable. All other $scopes are children of the $rootScope. Since $rootScope is a global, which means that anything you add here, automatically becomes available in $scope in all controller. To add something in $rootScope, you need to use app.run function which ensures that it will run prior to the rest of the app. You may say that "run" function is like "main" method of angular app.
app.run(function($rootScope) {
$rootScope.name = "AngularJS";
});
And then you can use in your view. (via expression)
<body ng-app="myApp">
<h1>Hello {{ name }}!</h1>
</body>
53. What are controllers in AngularJS?
In Angular, a Controller is a JavaScript constructor function. When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. The job of a controller is to pass data from the model, to the view or the view can asks for something from the controller, and the controller turns to the model and takes that thing, and hands it back to the view.
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', function($scope) {
$scope.website = 'jquerybyexample.net';
}
]);
And then in your HTML using ng-controller directive,
<div ng-controller="MyController">
<h1>My website address is {{ website }}!</h1>
</div>
54. What is the difference between $scope and scope in AngularJS?
$scope is used while defining a controller (see previous question) where scope is used while creating a link function for custom directive. The common part is that they both refers to scope object in AngularJS, but the difference is that $scope uses dependency injection where scope doesn't. When the arguments are passed-in via dependency injection, their position doesn't matter. So for example, a controller defined as ($scope as first parameter)
myApp.controller('MyController', ['$scope', function($scope, $http) {
OR ($scope is second parameter)
myApp.controller('MyController', ['$scope', function($http, $scope) {
In both the case, the postion of $scope doesn't matter to AngularJS. Because AngularJS uses the argument name to get something out of the dependency-injection container and later use it.
But in case of link function, the position of scope does matter because it doesn't uses DI. The very first parameter has to be scope and that's what AngularJS expects.
app.directive("myDirective", function() {
return {
scope: {};
link: function(scope, element, attrs) {
// code goes here.
}
};
});
However you can name it anything of your choice. In below code, foo is your scope object.
link: function(foo, bar, baz) {
// code goes here.
}
55. What is MVC Architecture in AngularJS?
In AngularJS, scope objects are treated as Model. The View is display of model that is your data. And the model gets initialized within a JavaScript constructor function, called Controller in AngularJS. Let take a look at below code to understand it better.
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script>
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope',
function($scope) {
$scope.website = 'jquerybyexample.net';
}
]);
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController">
<h1>My website address is {{ website }}</h1>;
</div>
</body>
</html>
Here MyController is a Controller and $scope (Model) is populated within Controller. And later on in div element $scope object data is displayed (View).
56. Can we have nested controllers in AngularJS?
YES. We can create nested controllers in AngularJS. Nested controller are defined in hierarchical manner while using in View. Take a look at below code. Here the hierarchy is "MainCtrl -> SubCtrl -> SubCtrl1".
<div ng-controller="MainCtrl">
<p>{{message}} {{name}}!</p>
<div ng-controller="SubCtrl">
<p>Hello {{name}}!</p>
<div ng-controller="SubCtrl2">
<p>{{message}} {{name}}! Your username is {{username}}.</p>
</div>
</div>
</div>
57. In case of nested controllers, does the $scope object shared across all controllers?
YES. The $scope object is shared across all controllers and it happens due to scope inheritance. Since the ng-controller directive creates a new child scope, we get a hierarchy of scopes that inherit from each other. So if we define a property on a parent scope, the child scope can manipulate the property. And if the property is not present in child scope, then parent scope property's value is used. Lets consider, the previous question HTML where there are 3 controllers. And here is the AngularJS code to define these controllers.
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope',
function($scope) {
$scope.message = 'Welcome';
$scope.name = 'Jon';
}
]);
myApp.controller('SubCtrl', ['$scope',
function($scope) {
$scope.name = 'Adams';
}
]);
myApp.controller('SubCtrl2', ['$scope',
function($scope) {
$scope.name = 'Ema';
$scope.username = 'ema123';
}
]);
You will see that the controller "SubCtrl2" doesn't have "message" property define but it is used in HTML. So in this case, the immediate parent scope property will be used. But immediate parent scope which is "SubCtrl" in this case, also doesn't have "message" property. So it again goes one level up and finds the property is present so it uses parent scope value for "message" property and displays it.
58. What are different ways of bootstrapping AngularJS?
is neat and superheroic JavaScript MVW (Model View Whatever) Framework which allows to extend HTML capabilities with Directives, expression, two way binding. In this post, we will see different ways of bootstrapping AngularJS. Bootstrapping in AngularJS is nothing but just the initialization of Angular app.
There are two ways of bootstrapping AngularJS. One is Automatic Initialization and other is Manually using Script.
When you add ng-app directive to the root of your application, typically on the <html> tag or <body> tag if you want angular to auto-bootstrap your application.
<html ng-app="myApp">
When angularJS finds ng-app directive, it loads the module associated with it and then compile the DOM.
Another way to bootstrapping is manually initializing using script. Manual initialization provides you more control on how and when to initialize angular App. It is useful when you want to perform any other operation before Angular wakes up and compile the page. Below is the script which allows to manually bootstrap angularJS.
<script>
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
</script>
If you have noticed, it is using document.ready which is great as it will make sure that before bootstrapping your DOM is ready. You don't need to inclued jQuery library reference here, as angularJS has within it. So angular.bootstrap function bootstrap angularJS to document. The second parameter is the name of module. You need to take care of following things while using manual process.
Remember angular.bootstrap function will not create modules on the go. So you need to have your modules define, before you manually bootstrap. So below is the correct approach. First define the module and then bootstrap.
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function ($scope) {
$scope.message= 'Hello World';
}]);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
</script>
You cannot add controllers, services, directives, etc after an application bootstraps.
59. What does SPA (Single page application) mean?
SPA is a concept where rather loading pages from the server by doing post backs we create a single shell page or master page and load the webpages inside that master page.
60. How can we create a custom directive in Angular?
Till now we have looked in to predefined Angular directives like “ng-controller”,”ng-model” and so on. But what if we want to create our own custom Angular directive and attach it with HTML elements as shown in the below code.
Hide Copy Code
<div id=footercompany-copy-right></div>
To create a custom directive we need to use the “directive” function to register the directive with angular application. When we call the “register” method of “directive” we need to specify the function which will provide the logic for that directive.
For example in the below code we have created a copy right directive and it returns a copy right text.
Please note “app” is an angular application object which has been explained in the previous sections.
app.directive('companyCopyRight', function ()
{
return
{
template: '@CopyRight questpond.com '
};
});
The above custom directive can be later used in elements as shown in below code.
<div ng-controller="CustomerViewModel">
<div company-copy-right></div>
</div>
Read More Angular JS Interview Questions:-
AngularJs Interview Questions Part1
AngularJs Interview Questions Part2
AngularJs Interview Questions Part3
AngularJs Interview Questions Part4
AngularJs Interview Questions Part5
AngularJs Interview Questions Part6
