Hello Friends, In this tutorial, We are going to discuss $rooScope in Angular Js. Similar to $scope, $rootScope is also a JavaScript which is available for entire Angular Js application.
After completing this tutorial you will be able to understand:
- $rootScope in Angular Js.
$rootScope in Angular Js:
As we have already discussed that $scope is specific to angular js controller. The rootScope is also a javascript object which is available for entire application.
If a property has the same name in both the current scope and in the rootScope, the application uses the one in the current scope.
Let’s create an example of rootScope:
<!DOCTYPE html>
<html>
<head>
<title>AngualrJS Controller</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="parentController">
Controller Name: {{controllerName}} <br />
Message: {{message}} <br />
<div style="margin:10px 0 10px 20px;" ng-controller="childController">
Controller Name: {{controllerName}} <br />
Message: {{message}} <br />
</div>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('parentController', function ($scope, $rootScope) {
$scope.controllerName = "parentController";
$rootScope.message = "Hello World!";
});
myApp .controller('childController', function ($scope) {
$scope.controllerName = "childController";
});
</script>
</body>
</html>You can see the demo here.
View More:
- $scope in Angular Js.
- ng-bind Directive.
- ng-change directive in Angular Js.
- ng-bind-template directive in Angular Js.
Conclusion:
I hope you understand this tutorial in Angular Js. I will appreciate your Feedback, Comments, and Suggestions.
Thank You.