Introduction
In my last articles I will told you about:
This article will tell you about the $rootScope service provided by AngularJS.
A scope provides a separation between View and it's Model. Every application has a $rootScope provided by AngularJS and every other scope is its child scope.
Here I will create an application that will help you understand this service in a convenient way.
Step 1
First of all you need to add an external Angular.js file to your application, "angular.min.js".
For this you can go to the AngularJS official site or download my source code and then fetch it or you can click on this link to download it: ANGULARJS.
After downloading the external file you need to add this file to the Head section of your application.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2
Now after adding the External JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now I will create a JavaScript function in which the $rootScope service will be initiated.
<script>
angular.module('app', []).controller('x', function ($scope, $rootScope) {
$rootScope.showAlert = "Hello Everyone";
});
angular.module('app').controller('x2', function ($scope, $rootScope) {
$scope.val = $rootScope.showAlert;
alert($scope.val);
});
</script>
Here I created two angular.modules, in the first module I created a controller named "x", in this controller the "showAlert" variable is used with the $rootScope, in this a showAlert message is provided.
In the second controller a variable "val" is used but it is taken under $scope, the value of rootScope is provided in this variable and then is provided in the alert.
Now our work on the View is completed so we can work on the ViewModel.
Step 3
<body>
<form id="form1" runat="server">
<div ng-app="app">
<div ng-controller="x"></div>
<div ng-controller="x2">{{val}}</div>
</div>
</form>
</body>
Here I took a Div that is bound using the ng-app, after this two Div are used, one of these is bound to the first controller, "x", and the second is bound to "x2"; both use the ng-controller.
In the second div the "val" variable is bound so this div will display the text that is passed in the val.
Now our application is ready for execution.
Output
On running the application an Alert Message will be displayed while the page is loading:
![root scope in angularjs]()
When you click on the "OK" button the same message will be displayed on the webform as well.
![root scope in angularjs]()
The complete code of this application is as follows:
<html ng-app="app" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script>
angular.module('app', []).controller('x', function ($scope, $rootScope) {
$rootScope.showAlert = "Hello Everyone";
});
angular.module('app').controller('x2', function ($scope, $rootScope) {
$scope.val = $rootScope.showAlert;
alert($scope.val);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="app">
<div ng-controller="x"></div>
<div ng-controller="x2">{{val}}</div>
</div>
</form>
</body>
</html>