What is $root scope in angularjs
Download as DOCX, PDF1 like3,067 views
$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.
![<!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)
What is $root scope in angularjs
- 1. What is $rootScope in AngularJs
- 2. $rootScope is a 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 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>
- 4. Thanks www.codeandyou.com http://www.codeandyou.com/2015/09/what-is- rootscope-in-angularjs.html Keywords - What is $rootScope in AngularJs, $rootScope, AngularJs $rootScope