11+ Year IT Industry Experience, Working as Technical Lead with Capgemini | Consultant | Leadership and Corporate Trainer | Motivational and Technical Speaker | Career Coach | Author | MVP | Founder Of RVS Group | Trained more than 4000+ IT professionals | Azure | DevOps | ASP.NET | C# | MVC | WEB API | ANGULAR | TYPESCRIPT | MEAN | SQL | SSRS | WEB SERVICE | WCF... https://bikeshsrivastava.blogspot.in/ http://bikeshsrivastava.com/

What is $rootscope in angularJs?

$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.
$rootscope Flow
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>
<!doctype html>
<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>
 Description:-
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

2 comments to "What is $rootscope in angularJs?"

  1. Really nice blog post.provided a helpful information.I hope that you will post more updates like this
    AngularJS Online Training

    ReplyDelete
  2. Nice post. I learned some new information. Thanks for sharing.
    Full Stack Online Training

    ReplyDelete

Life Is Complicated, But Now programmer Can Keep It Simple.