Angularjs rootscope tutorial

by

Angularjs rootscope:

The rootScope is the parent scope object for an AngularJS application and it will be single for an application. The data and methods of $rootScope object will be available to all the controllers. All scope objects are child objects.

Example Explanation:

First include the AngularJS library in the application. The ng-app directive initializes the application. The ng-controller directive defines the controller. We defined three controllers here and set their properties using $scope object. The parentController in the root scope for our application and its data and methods will be available for all scope objects. As we can see that siblingController is not its child controller but can access its data.

Example:

<!DOCTYPE html>
<html>
<head>
 <script src="
  https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js">
 </script>
</head>
<body ng-app="testApp">
<h1>AngularJS RootScope Example</h1>
    <div ng-controller="parentController">
        Controller Name: {{controllerName}} <br/>
        Message: {{message}} <br/><br/>
        <div ng-controller="childController">
            Controller Name: {{controllerName}} <br/>
            Message: {{message}} <br/><br/>
        </div>
    </div>
    <div  ng-controller="siblingController">
        Controller Name: {{controllerName}} <br/>
        Message: {{message}} <br/>
    </div>
    <script>
        var ngApp = angular.module('testApp', []);
 
        ngApp.controller('parentController', function ($scope, $rootScope) {
            $scope.controllerName = "parentController";
            $rootScope.message = "Hello World!";
        });
 
        ngApp.controller('childController', function ($scope) {
            $scope.controllerName = "childController";
        });
 
        ngApp.controller('siblingController', function ($scope) {
			$scope.controllerName = "siblingController";
        });
    </script>
</body>
</html>

Try it:

JS Bin on jsbin.com