I have 4+ experience and working as software Engineer with Hytech professionals India PVT ltd and also working as Consultant,Trainer,Blogger and Author on Microsoft technologies,Also I have Trained more than 500+ IT professionals.I have knowledge about Asp.net,C#,SQL,Project management,replication,MVC,WebApi,SSRS,PostMan,TFS,SVN,Swagger,WMI,Agile,SignalR,Angularjs,IIS configuration.

Part 6::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 Part 6::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. Thank You!
Author: Bikesh Srivastava - Saturday, 23 January 2016

There are currently no comments for "Part 6::What is $rootscope in angularJs?"

Post a Comment

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