Hello friends, this article will describe the use of $rootScope and how you can use it.
AngularJS $scope is limited to access only in its own controller. If you want to share angular variables among different controllers of common angular module, $rootScope makes it easy.
We will create three controllers for one common angular module. After that we will create $rootScope and access it from each and every control.
Step 1: Create angular module.
var myapp = angular.module("swclassapp",[]);
Step 2: Create angular controller.
myapp.controller("swclassappcontrollerFirst", function ($scope, $rootScope) {
$scope.ngvar = "First Controller";
$rootScope.ngcommonvar = "SW Class";
});
myapp.controller("swclassappcontrollerSecond", function ($scope, $rootScope) {
$scope.ngvar = "Second Controller";
$rootScope.ngcommonvar = "SW Class";
});
myapp.controller("swclassappcontrollerThird", function ($scope, $rootScope) {
$scope.ngvar = "Third Controller";
$rootScope.ngcommonvar = "SW Class";
});
Step 3 : Access local scope and rootScope.
<body ng-app="swclassapp">
<div ng-controller="swclassappcontrollerFirst">
Local Controller Scope : {{ngvar}} <br/>
Shared Scope : {{ngcommonvar}} <br />
</div><hr />
<div ng-controller="swclassappcontrollerSecond">
Local Controller Scope : {{ngvar}} <br />
Shared Scope : {{ngcommonvar}} <br />
</div><hr />
<div ng-controller="swclassappcontrollerThird">
Local Controller Scope : {{ngvar}} <br />
Shared Scope : {{ngcommonvar}} <br />
</div><hr />
</body>
Now create new html file with following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SW Class</title>
<style rel="stylesheet" href="/css/bootstrap.min.css"></style>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/angular.min.js"></script>
</head>
<body ng-app="swclassapp">
<div ng-controller="swclassappcontrollerFirst">
Local Controller Scope : {{ngvar}} <br/>
Shared Scope : {{ngcommonvar}} <br />
</div><hr />
<div ng-controller="swclassappcontrollerSecond">
Local Controller Scope : {{ngvar}} <br />
Shared Scope : {{ngcommonvar}} <br />
</div><hr />
<div ng-controller="swclassappcontrollerThird">
Local Controller Scope : {{ngvar}} <br />
Shared Scope : {{ngcommonvar}} <br />
</div><hr />
</body>
<script type="text/javascript">
var myapp = angular.module("swclassapp",[]);
myapp.controller("swclassappcontrollerFirst", function ($scope, $rootScope) {
$scope.ngvar = "First Controller";
$rootScope.ngcommonvar = "SW Class";
});
myapp.controller("swclassappcontrollerSecond", function ($scope, $rootScope) {
$scope.ngvar = "Second Controller";
$rootScope.ngcommonvar = "SW Class";
});
myapp.controller("swclassappcontrollerThird", function ($scope, $rootScope) {
$scope.ngvar = "Third Controller";
$rootScope.ngcommonvar = "SW Class";
});
</script>
</html>
The output will be as follows
Local Controller Scope : First Controller
Shared Scope : SW Class
Local Controller Scope : Second Controller
Shared Scope : SW Class
Local Controller Scope : Third Controller
Shared Scope : SW Class
rootScope will be shared among all controllers.
If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.
Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.