AngularJS Scopes:
Scopes in AngularJS application is an object which makes available all the functions and variables in a Controller and to HTML View. It acts as a glue between the View and its controller.
- It binds together View and Controller.
- Scope is generally defined using $scope in AngularJS controllers.
- Scopes are Controller specific. You cannot use $scope of A controller on the view of B controller.
- AngularJS has only one $rootScope object, which can be used across an application.
Example of using $scope:
<html>
<head>
<title>AngularJS - Expressions JSON Objects</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<p ng-bind="message"></p>
</div>
</body>
<script>
var app = angular.module("myApp",[]).controller("myController",function ($scope){
$scope.message = "Hello Readers. Hope this tutorial series is helping you."
});
</script>
</html>
Here, $scope is making message available to the View of myController. If you change or remove the ng-Controller directive from the div declaration, this will stop working.
Also if you don’t reference the message object to the $scope, it won’t work. To try this, edit this as :
<script>
var app = angular.module("myApp",[]).controller("myController",function ($scope){
message = "Hello Readers. Hope this tutorial series is helping you."
});
</script>
This won’t work because message variable is not defined in $scope.
$rootScope in AngularJS:
In an AngularJS application, $rootScope is accessible accross the app. There can be only one single $rootScope. If the object name of $rootScope is same as that of a Controllers scope, then current Controller scope is used.
Example:
<html>
<head>
<title>AngularJS - Expressions JSON Objects</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
<h2>{{Greetings}}</h2>
<b>{{anotherGreet}}</b>
<div ng-controller="controller1">
<p>{{Greetings}}</p>
<p ng-bind="message"></p>
<p ng-bind="anotherGreet"></p>
</div>
<div ng-controller="controller2">
<p ng-bind="message"></p>
</div>
</body>
<script>
var app = angular.module("myApp",[]);
app.run(function($rootScope){
$rootScope.Greetings = "Welcome to ParallelCodes.com";
$rootScope.anotherGreet = "Hope you are enjoying this tutorial series.";
});
app.controller("controller1",function ($scope,$rootScope){
$scope.message = "Hello Readers. I'm declared in controller1.";
$scope.anotherGreet = "Keep Learning";
});
app.controller("controller2", function($scope){
$scope.message = "Hello Readers. I'm declared in controller2";
});
</script>
</html>
OUTPUT:
In the above example, Greetings variable object is declared using $rootScope, so it can be used outside any controller declaration inside the ng-App directive. This variable is being also used in controller1 because of root scope usage. And the variable property anotherGreet is changed inside of controller1 and outside controller1 declaration.
In the next section of this series we will learn AngularJS events.
References: AngularJS API DOC