Each angular application consist of one root scope but may have several child scopes.
As child controllers and some directives create new child scopes, application can have multiple scopes.
When new scopes are formed or created they are added as a children of their parent scope.
Similar to DOM, they also creates a hierarchical structure.
Scope is a special javascript object which plays the role of joining controller with the views. Scope contains the model data. In controllers, model data is accessed via $scope object.
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
</script>
Following are the important points to be considered in above example.
$scope is passed as first argument to controller during its constructor definition.
$scope.message and $scope.type are the models which are to be used in the HTML page.
We've set values to models which will be reflected in the application module whose controller is shapeController.
We can define functions as well in $scope.
Scope Inheritance
Scope are controllers specific. If we defines nested controllers then child controller will inherit the scope of its parent controller.
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});
</script>
Following are the important points to be considered in above example.
We've set values to models in shapeController.
We've overridden message in child controller circleController. When "message" is used within module of controller circleController, the overridden message will be used.
Example
Following example will showcase all the above mentioned directives.
testAngularJS.htm
<html>
<head>
<title>Angular JS Forms</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "shapeController">
<p>{{message}} <br/> {{type}} </p>
<div ng-controller = "circleController">
<p>{{message}} <br/> {{type}} </p>
</div>
<div ng-controller = "squareController">
<p>{{message}} <br/> {{type}} </p>
</div>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});
mainApp.controller("squareController", function($scope) {
$scope.message = "In square controller";
$scope.type = "Square";
});
</script>
</body>
</html>
Result
Open textAngularJS.htm in a web browser. See the result.
In shape controller
Shape
In circle controller
Shape
In square controller
Square
