Learn AngularJS Hour 5: All About $scope Object

In hour 1, we learned how to get started with AngularJS.
In hour 2 , we learned about the AngularJS Template.
In hour 3 , we learned about two way bindings and filters.
On hour 4 , we learned about the $http service and making HTTP operations.

In the fifth hour of the series, we will learn about $scope in Angular. $scope is an object that connects a View and Controller together.



To understand $scope better let us start with the first Angular app we wrote as in the following:



When the program above is run and due to $rootScope of Angular, when you don't provide any $scope explicitly, Angular works with $rootScope. To understand $rootScope better let us understand the following diagram:



We have added the attribute name in $rootScope under the main function. The main function can be considered as the main method of the Angular app. Since the attribute is added to $rootScope, it can be accessed anywhere on the view and we do not need a controller to access it. Due to $rootScope the hello world ng-model of TextBox was rendered on the view with the template {{name}}.

For a complex application you will need to create an explicit $scope. Consider we have a view as below:

<div ng-controller="authorController" >
        {{author.name}} is {{author.age}} old
 </div>

Here we have attach a controller object to the div element of the DOM in the view. Now to ensure that the author.name and author.age attributes are available on the view, we need to create an explicit $scope that can be created as in the following:

app.controller('authorController', function ($scope) {
    $scope.author = {
        name: "Dhananjay Kumar",
        age: 32
    };
});

The attribute author of authorController will be available to all child elements of the div to which authorController is attached. For example consider the following View, we are able to read the value of the author attribute in the child div as well.

<div ng-controller="authorController" >
      <div>
          I am in child div  <br/>
          {{author.name}} is {{author.age}} old
      </div>
  </div>

We can summarize a few points about $scope as follows:

• $scope ties the view and controller together
• $scope provides an execution context in which a DOM element is bound
• In the context of MVC , $scope can be seen as a model
• View and model both have access to $scope
• $scope holds data and functions from the controller that should be displayed and executed in the view
• $rootScope is the top-most scope of a DOM element with ng-app directive

In Angular all the $scope are created with prototypal inheritance. All $scope has access to their parent scope. For the example above $scope of authorController has access to $rootScope. On the view the $scope of the child controller can access the attributes of the parent controller. To understand it better, let us create two controllers. authorController is the parent controller and childAuthorController is the child controller. You can see in the child controller childAuthorController that the author attribute of the authorController is something.

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

app.controller('authorController', function ($scope) {
    $scope.author = {
        name: "Dhananjay Kumar",
        age: 32
    };
});

app.controller('childAuthorController', function ($scope) {

    $scope.hello = function()
    {
        alert($scope.author.name);
    }
})

On the view we have two divs, the first div is attached to the parent controller whereas the second view is attached to the child controller.

<div ng-controller="authorController" >
        <div ng-controller="childAuthorController">

            {{author.name}} is {{author.age}} old
            <button ng-click="hello()" class="button" >say Hello</button>
        </div>
    </div>

You can see that we have access to the parent controller attributes inside the DOM element that is attached with the child controller.

$scope works on the prototypal inheritance in Angular. Diagrammatically we can show that as follows:



This is how the $scope object works in Angular. Even though it performs complex tasks like binding a controller and view together, at the end of the day it is a simple JavaScript object. Having good knowledge of $scope is big help for implementing complex Angular applications. Happy coding.