- $rootScope is a parent scope of all $scope and can be shared to all $scope.
- One application can have only one $rootScope.
- $scope is a JavaScript object associated to controller but $rootScope is not.
- Scopes provide separation between model and the view.
- For use of $rootScope need to inject into controller.
- Methods and properties created in the $scope object are only accessed inside same controller in view.
- All other scopes are descendant scopes of the root scope.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <!DOCTYPE html><html> <head> <title>Share data between controllers in AngularJs with $rootScope</title> <script> var app = angular.module("myApp", []); app.run(function($rootScope) { $rootScope.userData = {}; $rootScope.userData.firstName = "Ravi"; $rootScope.userData.lastName = "Sharma"; }); app.controller("firstController", function($scope, $rootScope) {}); app.controller("secondController", function($scope, $rootScope) {}); </script></head> <body ng-app="myApp"> <div ng-controller="firstController"> <br> <input type="text" ng-model="userData.firstName"> <br> <input type="text" ng-model="userData.lastName"> <br> <br>First Name: <strong>{{userData.firstName}}</strong> <br>Last Name : <strong>{{userData.lastName}}</strong> </div> <hr> <div ng-controller="secondController"> Showing first name and last name on second controller: <b> {{userData.firstName}} {{userData.lastName}}</b> </div></body> </html> |
<!DOCTYPE html>
<html>
<head>
<title>Share data between controllers in AngularJs with $rootScope</title>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.run(function($rootScope) {
$rootScope.userData = {};
$rootScope.userData.firstName = "Ravi";
$rootScope.userData.lastName = "Sharma";
});
app.controller("firstController", function($scope, $rootScope) {
});
app.controller("secondController", function($scope, $rootScope) {
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="firstController">
<br>
<input type="text" ng-model="userData.firstName">
<br>
<input type="text" ng-model="userData.lastName">
<br>
<br>First Name: <strong>{{userData.firstName}}</strong>
<br>Last Name : <strong>{{userData.lastName}}</strong> </div>
<hr>
<div ng-controller="secondController"> Showing first name and last name on second controller: <b> {{userData.firstName}} {{userData.lastName}}</b> </div>
</body>
</html>
Hello , I have been providing AngularJS course in Chennai for the past 6 months, and at times, I have used your blog as reference for my students in the class. It has been so much useful. Thank you, keep writing more :)
ReplyDelete