Download to read offline
![<!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"></scri
pt>
<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>](https://image.slidesharecdn.com/whatisrootscopeinangularjs-150909181744-lva1-app6892/85/What-is-root-scope-in-angularjs-3-320.jpg)
![<!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"></scri
pt>
<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>](https://image.slidesharecdn.com/whatisrootscopeinangularjs-150909181744-lva1-app6892/75/What-is-root-scope-in-angularjs-3-2048.jpg)
Uploaded bycodeandyou forums
What is $root scope in angularjs
$rootScope is the parent scope in AngularJS that is shared among all other scopes and controllers. It provides a way to share data between controllers since it is globally accessible unlike normal scopes which are isolated to their controllers. The $rootScope is injected into controllers to allow access to its properties and methods from any scope.
More Related Content
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
What is $root scope in angularjs
- 1. What is $rootScopein AngularJs
- 2. $rootScope isa parent scope of all $scope and can be sharedtoall $scope. One applicationcanhave onlyone $rootScope. $scope is a JavaScriptobjectassociatedtocontroller but$rootScope isnot. Scopesprovide separationbetweenmodel andthe view. For use of $rootScope needtoinjectintocontroller. Methodsand properties createdinthe $scope objectare onlyaccessed insidesame controllerin view. All otherscopesare descendantscopesof the rootscope.
- 3. <!DOCTYPE html> <html> <head> <title>Share databetween 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"></scri pt> <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>
- 4. Thanks www.codeandyou.com http://www.codeandyou.com/2015/09/what-is- rootscope-in-angularjs.html Keywords - Whatis $rootScope in AngularJs, $rootScope, AngularJs $rootScope