In Angularjs Scope is simply a JavaScripe object . Scope is the glue between Angularjs controller and view. The scope holds all the model data required for the view to be displayed. In Angularjs the scope is hierarchical in nature. In this article we will explain the various aspects of Angularjs scopes.
Whats scope in Angularjs:
Angularjs scope is JavaScripe object which holds properties and methods. This scope object is used for data binding (2 way binding) between view (HTML) and Angular controller. So remember its just an object.
In Angular application there can be multiple scopes. When Angular scan the DOM and encounter ng-app it creates the root scope $rootScope. Each controller will create separate child scope under the root scope. In below example it creates only root scope but no child scope. Since there are no controller defined.
<!doctype html>
<html ng-app><!--Angularjs create the root scope here -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>
</head>
<body>
<div>
<label>Anything:</label>
<!-- someContent is the property in the root scope-->
<input type="text" ng-model="someContent" placeholder="Type something here">
<br/>
<h1>Hello {{someContent}}</h1>
</div>
</body>
</html>
Child Scope ($scope):
When we have controller then there would be child scope under the $rootScope. In general while writing controller we pass $scope object as an argument. This is nothing but child scope. For example
<!doctype html>
<html><!--Angularjs create the root scope here -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController',function($scope){
$scope.firstName="Hamidul";
$scope.lastName="Islam";
});
</script>
</head>
<body>
<div ng-app="myApp">
<label>Anything:</label>
<!-- someContent is the property in the root scope-->
<input type="text" ng-model="someContent" placeholder="Type something here">
<br/>
<h1>Hello {{someContent}}</h1>
<br/>
<div ng-controller="myController"><!-- Create the child scope -->
<label>First Name:</label>
<input type="text" ng-model="firstName" placeholder="First Name"/>
<label>Last Name:</label>
<input type="text" ng-model="lastName" placeholder="Last Name"/>
</div>
</div>
</body>
</html>
According to the above code the imagination would be as below
$rootScope:someContent(property) | | |-----$scope | |firstName(property) | |lastName(property) | |myController(function)
The $rootScope is available in the entire application.In Angularjs every application has $rootScope. The $rootScope is created when angular encounter ng-app directive. $rootScope is a parent object of all $scope objects created in a web page. A child scope can be nested. That means a child scope can have another child scope and so on.
If we have multiple controllers then the picture would be something like below
Accessing $rootScope in a controller:
We can access $rootScope from the controller. Just inject $rootScope in the controller
<script>
var app = angular.module('myApp', []);
app.controller('myController',function($scope,$rootScope){
//We can access $rootScope now
});
</script>
Pingback: Understanding Angularjs scope $rootScope and $scope - Angular News