Hey Ninjas, today we will discuss a widely used fronted framework property named AngularJS Scope. AngularJS is a JavaScript framework that we majorly use for developing single-page applications.
For this article, we expect that you have a basic understanding of AngularJS. You can visit our library on AngularJS for more information.
In this article, we will focus on the AngularJS Scope. We start by defining it, then see the basic terms related to it and its types.
What is AngularJS scope?
To know the answer to what AngularJS scope is, we will first know what scope is. We often come across the term scope in programming. It refers to the area where a particular variable or function will operate. Similarly, in AngularJS, Scope is a keyword that avails variables/ functions within the range of a view in HTML.
The scope is a service for AngularJS. It is an object that refers to a model. It allows access to properties and variables within the Scope and acts as a mediator between the View & the Controller. The scope looks at expressions in your View and performs the event.
In the above definition, we used some terms like View, Model, and Controller. Before further discussions, let us define these basic terms related to scope.
Terms related to Scope
Some of the basic terms related to AngularJS are:
View
AngularJS View is the content that is displayed to the user. According to a user request, the user's View of an application is displayed to the application. Because a single-page application can have several views, an application can be separated into logical views. Thus, it can bind distinct views to controllers using the combination of views and routes.
Model
In AngularJS, a model is a plain JavaScript object representing the application's data. We typically use models to store and manipulate the data that's displayed to the user in the view. In AngularJS, the controller and view access the model to retrieve and update the data. AngularJS provides two-way data binding, allowing changes made to the model to propagate to the view automatically and vice versa. Thus, it helps in handling user interactions such as clicking on buttons, scrolling, or causing other changes in the View.
Controller
In AngularJS, a controller is a JavaScript constructor function. Controllers are responsible for setting up the initial state of the $scope object and providing methods that can be used to update and interact with the data on the $scope.
We use the controllers to expose data and methods to the view, manipulate the data, and define the behavior of a view.
We use an ng-controller directive to define a controller. We can associate a controller with a portion of the view using the ng-controller directive.
Each controller has its own $scope object. $scope is a parameter that each Controller accepts, and we can use the $scope object to share data and methods between controllers.
Now, let us learn the different types of scopes.
Types of Scopes
Majorly, there are two types of scopes in AngularJS. They are as follows.
$scope: used for local scope
$rootscope: used for global scope
Scope
The $scope defines the functional area of variables or properties. However, it only represents the local perimeter where the variable or property is operable. A Scope can be compared to the local variable scope in programming.
Syntax:
$scope
The following example will give a better understanding:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<!--
In this, we see that scope defines name and profession. Since, scope defines local perimeter these are similar to local variables.
-->
<div ng-app="myApp" ng-controller="myCtrl1">
Local scope name is <i>{{name}}</i> & local profession is <i>{{job}}</i>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl1', function ($scope) {
$scope.name = "Shubham Agarwal";
$scope.job = "Technical Content Writer";
});
</script>
</body>
</html>
Output:
In the above code, we defined a "myCtrl1" controller with local scope variables name and profession. The name and profession have been initialized in the controller "myCtrl1".
So, when the div with ng-controller="myCtrl1" is invoked, the name and profession corresponding to "myCtrl1" are displayed in place of {{name}} and {{profession}}.
RootScope
Rootscope is used to define the scope for global variables and properties. The variables and methods added to the $rootScope can be accessed from any scope in the application.
But, we have a special condition we need to discuss. If the variables contain the same name in both the rootscope and the current Scope, the Controller will use the current Scope for that variable.
Syntax:
$rootScope
We can access the properties of this using a dot operator.
$rootScope.name
Let us see an example to understand it better.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<!--
In this, we see that variable (describing name) is having the same name in both the rootscope and current Scope. So, the Controller or the application will use the current Scope unless provided $root.
-->
<div ng-app="myApp" ng-controller="myCtrl1">
Local scope name is <i>{{name}}</i> & local profession is <i>{{job}}</i>
<br />
<br />
Global scope within local scope :
<br />
Global name is <i>{{ $root.name}}</i> & profession is <i>{{$root.profession}}</i>
<br />
Global scope name is <i>{{name}}</i> & profession is <i>{{profession}}</i>
</div>
<script>
var app = angular.module('myApp', []);
app.run(function ($rootScope) {
$rootScope.name = "Radha Agarwal";
$rootScope.profession = "Doctor";
});
app.controller('myCtrl1', function ($scope) {
$scope.name = "Shubham Agarwal";
$scope.job = "Technical Content Writer";
});
</script>
</body>
</html>
Output:
NOTE: Since the variables have the same name, in the last line, we get Shubham Agarwal as output, instead of Radha Agarwal. This happens because the application is using the current scope for this variable. Here we have the same variable name, “name,” for both global scope and local scope. So, unless we provide $root along with the scope, it will take the name to be “Shubham Agarwal” and not “Radha Agarwal.”
Frequently Asked Questions
What is a scope?
In AngularJS, a scope is an object that acts as a binding context for expressions in the view. In simple words, the glue connects the view to the controller, and the model is scope.
What is a view?
AngularJS View is the content that is displayed to the user. According to a user request, the user's View of an application is displayed to the application.
What is a model?
In AngularJS, a model is a plain JavaScript object representing the application's data. We typically use models to store and manipulate the data that's displayed to the user in the view.
What is a controller?
In AngularJS, controllers are responsible for setting up the initial state of the $scope object and providing methods that can be used to update and interact with the data on the $scope.
What is the difference between Scope and rootscope?
Scope creates a local scope for variables and properties, whereas rootscope creates global Scope.
What happens when the rootscope and scope variable names are the same?
If the rootscope and scope variable/ property name is the same, the Controller will use the current Scope.
Can a rootscope be used inside a local scope?
Yes, a rootscope can be used inside a local scope. The rootscope variables/properties can be accessed using the dot operator, $rootscope.name.
Conclusion
In this article, we discussed the scope keyword in AngularJS. We defined scope, then learned about the basic terminology associated with it. Then, we read about the types of scopes along with examples.
Check out our articles if you think this blog has helped you enhance your knowledge and want to learn more. Visit our website to read more such blogs.
117+ registered 