Angularjs Examples

AJS Examples


AngularJS $rootScope Service

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]);

AngularJS $rootScope Service Example


<!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>