Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is AngularJS scope?
3.
Terms related to Scope
3.1.
View
3.2.
Model
3.3.
Controller
4.
Types of Scopes
4.1.
Scope
4.2.
RootScope
5.
Frequently Asked Questions
5.1.
What is a scope?
5.2.
What is a view?
5.3.
What is a model?
5.4.
What is a controller?
5.5.
What is the difference between Scope and rootscope?
5.6.
What happens when the rootscope and scope variable names are the same?
5.7.
Can a rootscope be used inside a local scope?
6.
Conclusion
Last Updated: Mar 27, 2024
Medium

AngularJS Scope

gp-icon
Basics of Javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

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.

AngularJS Scope

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.

What is angularJS scope?

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.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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:

Output for example 1

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:

Output for rootScope example

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. 

  1. Introduction to AngularJS  
  2. React vs Angular  
  3. Angular js vs. Nodejs 
  4. Difference between Angular and AngularJs 
  5. AngularJs Library 

 

For placement preparations, you must look at the problemsinterview experiences, and interview bundles. Enroll in our courses and refer to the mock tests and problems available; look at the Problem Sheets interview experiences, and interview bundle for placement preparations. You can also book an interview session with us.  

Consider our paid courses, however, to give your career a competitive advantage!

Happy Coding!

Previous article
Rxjs in Angular
Next article
Decorators in Angular
Guided path
Free
gridgp-icon
Basics of Javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass