$rootscope provides access to the top of the scope hierarchy, a scope provides a separation between View and its Model. Every application has a $rootScope provided by AngularJS and every other scope is its child scope.
Now see how to use it step by step,
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 Divs 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.
<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>
Now see how to use it step by step,
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 Divs 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.
<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>
0 comments:
Post a Comment