Sunday, December 15, 2013

Example of Scope hierarchy in Angular JS

Angular JS has a $scope object which is mostly used to expose the domain model, model or domain level properties are assigned to $scope and can be accessed in view as well as controller.

In a single application we can have multiple controllers and each controller can refer to their own instance of $scope object, parent scope as well as $rootScope which is parent most scope of an application.$rootScope is created when the application bootstraps.

In the below example I have 2 controllers for my application, one is mainController and other one is named as subController. subController has a child controller named as childController.

MainController has one property named as Mngname, and it assigns a property named compayName to it's parent scope which is nothing but $rootscope.

SubController has one property named as amName.

ChildController takes $rootScope along with $scope as it's inputs, it has one property named empName, it creates and assigns one property of it's parent scope i:e, scope of SubController named as dept. It creates another property comp which holds the value of companyName property of $rootScope.



<!DOCTYPE html>
<html>
<head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/
angular.js"></script>
    <script>
        var  mainController=function($scope)
        {
            $scope.MngName='Jade';
            $scope.$parent.companyName='Mcommerce';
        }
        var  subController=function($scope)
        {
            $scope.amName='Jane';
            $scope.childController=function($scope,$rootScope)
            {
                $scope.empName='Scott';
                $scope.$parent.dept='Sales';
                $scope.comp=$rootScope.companyName;

            }

        }
         var appVar=angular.module('ScopeTest',[]);
    </script>
    <title>Angular scope chain</title>
</head>
<body ng-app="ScopeTest">
   <div ng-controller="mainController">
        <table title="ParentTable" border="5px">
            <caption>Level1</caption>
            <tr>
                <td>Manager Name</td>
            <td>{{MngName}}</td>
            </tr>
            <tr>
                <td>
            <table border="4px" ng-controller="subController">
                <caption>Level2</caption>
                <tr>
                <td>Associate Manager Name</td>
                   <td>{{amName}}</td>
                </tr>
                <tr>
                    <td>Reporting To</td>
                    <td>{{MngName}}</td>
                    </tr>
                <tr>
                    <td>Department Assigned at Employee Level</td>
                    <td>{{dept}}</td>
                </tr>
                <tr>

                    <td>

                        <table border="3px" ng-controller="childController">
                            <caption>Level3</caption>
                            <tr>
                                <td>Employee Name</td>
                                <td>{{empName}}</td>
                            </tr>
                            <tr>
                                <td>Comp</td>
                                <td>{{comp}}</td>
                            </tr>


                        </table>
                    </td>
                </tr>
            </table>
                </td>
            </tr>
        </table>

   </div>

</body>
</html>