Hello Friends, In this tutorial, We are going to discuss $rooScope in Angular Js. Similar to $scope, $rootScope is also a JavaScript which is available for entire Angular Js application.

After completing this tutorial you will be able to understand:

  • $rootScope in Angular Js.

$rootScope in Angular Js:

As we have already discussed that $scope is specific to angular js controller. The rootScope is also a javascript object which is available for entire application.

If a property has the same name in both the current scope and in the rootScope, the application uses the one in the current scope.

$rootScope

Let’s create an example of rootScope:

<!DOCTYPE html>

<html>

<head>

    <title>AngualrJS Controller</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>

</head>

<body ng-app="myApp">

    <div ng-controller="parentController">

        Controller Name: {{controllerName}} <br />

        Message: {{message}} <br />

        <div style="margin:10px 0 10px 20px;" ng-controller="childController">

            Controller Name: {{controllerName}} <br />

            Message: {{message}} <br />

        </div>

    </div>




    <script>

        var myApp = angular.module('myApp', []);




        myApp.controller('parentController', function ($scope, $rootScope) {

            $scope.controllerName = "parentController";

            $rootScope.message = "Hello World!";

        });




      myApp .controller('childController', function ($scope) {

            $scope.controllerName = "childController";

        });




     

    </script>

</body>

</html>

You can see the demo here.

View More:

Conclusion:

I hope you understand this tutorial in Angular Js. I will appreciate your Feedback, Comments, and Suggestions.

Thank You.

112 Comments