Learn AngularJS Hour 5: All about $scope object

In 5^th hours of series, we will learn about $scope in Angular. $scope is an object which connects View and Controller together.

To understand $scope better let us start with first angular app we wrote,

Above program ran 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 below diagram,

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

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

1 2 3

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

Here we have attach a controller object to div element of DOM in view. Now to make sure that author.name and author.age attribute is available on the view, we need to create explicit $scope. That can be created as below,

1 2 3 4 5 6

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

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

1 2 3 4 5 6

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

We can summarize few points about $scope as follows,

• $scope ties view and controller together
• $scope provides an execution context in which DOM element is bound
• In context of MVC , $scope can be seen as model
• View and model both have access of $scope
• $scope holds data and functions from controller that should be displayed and get executed in view
• $rootScope is top most scope in on 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 above example $scope of authorController has access to $rootScope. On the view $scope of child controller can access attributes of parent controller. To understand it better, let us create two controllers. authorController is parent controller and childAuthorController is child controller. You can see in the child controller childAuthorController that author attribute of authorController

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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 div, first div is attached to parent controller whereas second view is attached to child controller.

1 2 3 4 5 6 7

<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 of parent controller attributes inside DOM element which is attached with child controller.

$scope work on prototypal inheritance in angular. Diagrammatically we can show that as follows,

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

Source collected from :http://debugmode.net/2014/08/13/learn-angularjs-hour-4-all-about-scope-object/