$rootScope is defined as" 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 shown in image below.
Example of $rootscope in AngularJs:-
By this example you can understand difference between $scope and $rootscope.
Step 1:-Create simple HTML page.
Step 2:-Include AngularJs library to support Angularjs in your application inside head tag with script tag.
or /use CDN URL:-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
We are using two controllers in the same HTML template and each one manages its own $scope object.In the example we have two controllers, Ctrl1 and Ctrl2, and even though there are some model variables named in the same way for both the controllers, each one resides in its own $scope thus avoiding any conflict (they are in fact different variables even though the name is the same).
I declared $rootscope in Ctrl1 but using $rootscope value in Ctrl2,.
you can store $rootscope value in any $scope and any where in any controller.
Example of $rootscope in AngularJs:-
By this example you can understand difference between $scope and $rootscope.
Step 2:-Include AngularJs library to support Angularjs in your application inside head tag with script tag.
or /use CDN URL:-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<!doctype html>Description:-
<html>
<body ng-app="myApp">
<div ng-controller="Ctrl1" style="border:2px solid blue; padding:5px">
Hello {{msg}}!
<br />
Hello {{name}}!
(rootScope)
</div>
<br />
<div ng-controller="Ctrl2" style="border:2px solid green; padding:5px">
Hello {{msg}}!
<br />
Hey {{myName}}!
<br />
Hi {{name}}! (rootScope)
</div>
<script src="angular.js"></script>
<script>
var app = angular.module('myApp', [ ]);
app.controller('Ctrl1', function ($scope, $rootScope) {
$scope.msg = 'World';
$rootScope.name = 'AngularJS';
});
app.controller('Ctrl2', function ($scope, $rootScope) {
$scope.msg = 'Bikesh srivastava Blog';
$scope.myName = $rootScope.name;
});
</script>
</body>
</html>
We are using two controllers in the same HTML template and each one manages its own $scope object.In the example we have two controllers, Ctrl1 and Ctrl2, and even though there are some model variables named in the same way for both the controllers, each one resides in its own $scope thus avoiding any conflict (they are in fact different variables even though the name is the same).
I declared $rootscope in Ctrl1 but using $rootscope value in Ctrl2,.
you can store $rootscope value in any $scope and any where in any controller.
You have just read an article that categorized by title AngularJs
by title What is $rootscope in angularJs?. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2016/01/part-6what-is-rootscope-in-angularjs.html?hl=en. Thank You!
Author:
Bikesh Srivastava - Saturday, January 23, 2016
Really nice blog post.provided a helpful information.I hope that you will post more updates like this
ReplyDeleteAngularJS Online Training
Nice post. I learned some new information. Thanks for sharing.
ReplyDeleteFull Stack Online Training