In this article, we will see what the scope is in AngularJS and how to use Scope, along with understanding its implementation through the examples.
The Scope in AngularJS is the binding part between HTML (view) and JavaScript (controller) and it is a built-in object. It contains application data and objects. It is available for both the view and the controller. It is an object with available properties and methods. There are two types of scopes in Angular JS.
- $Scope
- $rootScope
How to use the Scope?
When we make a controller in AngularJS, we will pass the $scope object as an argument. In AngularJS, it creates and injects a different $scope object into each controller in an application. Thus, the data and methods attached to $scope inside one controller cannot be accessed on another controller. Amidst the nested controller, the child controller will acquire the parent controller’s scope object. Accordingly, the child controller can access properties added to the parent controller but the parent controller cannot access properties annexed to the child controller.
Understanding the Scope: If we see an AngularJS application that consists of:
- The HTML view.
- Model, the data which is available for the current view.
- Controller, the JavaScript function that makes/changes/removes/controls the data.
The scope is the model and it is a JavaScript object with properties and methods which are available for both the view and the controller.
Example 1: In this example, we will see the use of the $scope object & will also see how data is transferred from the controller to the view component which is rendered by using interpolation.
Tóm Tắt
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="gfg"
ng-controller="myCtrl">
<h1>{{organisation}}</h1>
</div>
<p>
The property "organization" was made in
the controller, and can be referred to
in the view by using the {{ }} brackets.
</p>
<script>
var geeks = angular.module("gfg", []);
geeks.controller("myCtrl", function($scope) {
$scope.organisation = "GeeksforGeeks";
});
</script>
</body>
</html>
Output:
Example 2: From the previous example, we have used only single scope, but for larger applications, which may be a section in the HTML DOM that can access certain scopes.
HTML
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Scope</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="gfg"
ng-controller="control">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var geeks = angular.module("gfg", []);
geeks.controller("control", function($scope) {
$scope.names = [
"DSA Learning",
"Algorithm Learning",
"Web Technology",
];
});
</script>
</body>
</html>
Output:
Root Scope: Root scope is a scope that is created on the HTML element which has the ng-app directive & is contained in all the applications. The availability of root scope is in the whole application.
Example 3: If any variable is declared with the same name in the current scope & root scope then the current scope will be used by the application. In this example, we will see how the variable named “color” is used by the current scope.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is still:</p>
<h1>{{color}}</h1>
<p>
Note that the color variable in controller does
not overwrite the color value in rootScope.
</p>
<script>
var app = angular.module("myApp", []);
app.run(function($rootScope) {
$rootScope.color = "turquoise";
});
app.controller("myCtrl", function($scope) {
$scope.color = "salmon";
});
</script>
</body>
</html>
Output:
Difference between $Scope & $rootScope:
$rootScope
$Scope
$rootScope is a parent object of all “$scope” angular objects created in a webpage.
$scope is a child object that is used to bind the HTML(view) & Javascript(Controller) in a webpage.
It is created with the ng-app directive.
It is created with the ng-controller directive.
It is available globally for all the controllers, i.e, the property assigned with “$rootscope” can be used anywhere.
It is available only to the controller that has created it, i.e. the property assigned with “$scope” can’t be used outside the controller in which it is defined.
In this case, every application has at least a single “$rootscope” & its lifecycle is the same as the app.
In this case, every controller can have its own scope, which is not shared with others.
My Personal Notes
arrow_drop_up
