The AngularJS $rootScope
service in AngularJS provide access to the application's main and top level scope. Also, $rootScope
allows to create property and methods on a root scope that will be available to the all child scopes.
Syntax
$rootScope.Scope([providers], [instanceCache]);
<!DOCTYPE html>
<html>
<head> <!-- www.techstrikers.com -->
<title>AngularJS $rootScope Example</title>
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
<script>
var app = angular.module("RootScopeInitialization",[]);
app.run(function($rootScope){
$rootScope.rootLevel = "Property from root level";
$rootScope.customFunction = function()
{
$rootScope.rootMethod = 'Hello, Method called from root scope';
}
});
app.controller("RootScopeController",['$scope', function ($scope){
}]);
</script>
</head>
<body style="background-color:#DDE4E9;font-family:arial;" ng-app="RootScopeInitialization">
<fieldset style="background-color:#DDE4E9;">
<legend>AngulerJS $rootScope Example</legend>
<div ng-controller="RootScopeController">
<p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;">{{rootLevel}}</p>
<p><button ng-click="customFunction()">Custom Function on Root Scope</button></p>
<p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;">{{rootMethod}}</p>
</div>
</fieldset>
</body>
</html>