EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials AngularJS Tutorial Scope in AngularJS
Secondary Sidebar
AngularJS Tutorial
  • AngularJS Basic and Advance
    • What is AngularJS
    • Career In AngularJS
    • Uses of Angular JS
    • AngularJS Architecture
    • Angular JS Application
    • AngularJS Application
    • AngularJS Filter Array
    • AngularJS ng-style
    • AngularJs ng init
    • AngularJs ng-repeat
    • AngularJs ng-change
    • AngularJs ng-options
    • AngularJs expressions
    • AngularJs onclick
    • AngularJS ng-show
    • AngularJs ng-include
    • Scope in AngularJS
    • AngularJS ng-if
    • AngularJS Number Filter
    • AngularJS Date Filter
    • AngularJS ng-class
    • AngularJS ng-model
    • AngularJS ng-disabled
    • AngularJS Custom Filter
    • AngularJS Validation
    • AngularJS Filters
    • Controllers in AngularJS
    • AngularJS Animations
    • AngularJS Services
    • AngularJS Events
    • AngularJS Versions
    • AngularJS Directives
    • AngularJS Unit Testing
    • AngularJS with Bootstrap
    • AngularJS UI Bootstrap
    • AngularJS Routing Example
  • Interview Question
    • Angular JS Interview Questions

Scope in AngularJS

Scope in AngularJS

Introduction to Scope in AngularJS

The concept of scope was introduced in AngularJS 1.xx, it is written $scope and read as SCOPE, $scope binds the view (HTML template) and controller (data to be added or rendered on the template), so it is the glue between view and controller. The data available in a controller to be rendered in view is known as the model.

The controller provides data to view, and whenever there are any updates/changes in model data, the view is rendered with updates because of $scope.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Angular JS

The scope is very important in angularJS as it helps to develop MVC pattern applications that is one of the core features of the angularJS framework.

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,198 ratings)
  • Model – in MVC pattern Model is the data available to view for rendering.
  • View – View has a responsibility to display data to the user or on UI.
  • Controller − Controller controls the interactions between the Model and View.

The controller is single points of the data source to view. $scope is a special Javascript object provided by AngularJS that is injected to view. $scope has properties and methods, which can be parsed in the view template of angularJS application using expression ({{}}).

Controllers and Scopes

The controller is a Javascript function that is available to a part of the view; we pass the scope object to the controller as an argument, the view can render data available to it through $scope, ng-model, and ng-bind directives in AngularJS helps us to achieve two-way data binding in AngularJS application.

$scopes is a Javascript object, and controllers is a Javascript function; these two interact in the following situations:

  • Controllers use the $scope object to expose controller methods to templates.
  • Controllers define methods (behavior) that can mutate the model or properties on the scope.
  • Controllers may have registered watches on the model.
  • Each controller is attached to one corresponding $scope only but may be a child of one or more
    $scope objects.

Adding Properties and methods to $scope object

ngApp.controller('firstController', function ($scope){
$scope.message = "Hello!";
$scope.name = “John”
$scope.greet = function(){
return $scope.message+“ ” + $scope.name;
});
$scope

This is a $scope object provided by angularJS framework; here, it is injected in Controller, or in other words, passed as argument in Controller.

$scope.method

Using this, we can add properties and methods to $scope object, code here adds message and name properties, and greet method to $scope object.

$scope.message

This example illustrates the way to add a method to the $scope object.

Making scope available to view

AngularJS provides a bunch of directives; ng-controller is the directive used to specify the controller for a particular view.

<!DOCTYPE html>
<html >
<head>
<title>AngularJS $scope example</title>
Include angularJS library here to include it in project
</head>
<body ng-app="myApp">
<div ng-controller="'firstController'"> Greetings: <br />
{{message}}+‘ ‘+ {{name}}<br />
</div>
</body>
</html>

Ng-app

Ng-app is the directive provided by AngularJS; from this point scope of the Angular application starts.

body ng-app=”myApp”

Including angular library to the HTML page

div ng-controller=”‘firstController'”

Ng-controller directive is used to insert a controller in a view and define its $scope.

name and message are properties of

$scope object accessed in the view template; here, we can also use $scopes methods.

AngularJS applications can have multiple scopes as per requirement; each scope is attached with a controller. Expressions in AngularJS and evaluated against scope and scope provide a context to expression evaluation; for example, {{name}} is an expression in the above code example, and this is evaluated against $scope passed in firstController.

two way data binding

$scope objects provide us a way to achieve two-way binding in AngularJS, with the help of build-in directive AngularJS called ng-model and $watch and $apply API.

What is $rootScope?

On the application level, there is a root scope in AngularJS Application; root scope is provided by the AngularJS framework; it is the parent of all the scopes available in the application. All controllers ($scopes) inherit properties and methods from $rootScope, so root scope also serves as a way to pass data down the controllers and makes it available for all over the application. Apart from root scope their maybe other child-parent relationship in scopes in the scopes of angularJS application, and as a general rule, child

$scope have access of all the properties and methods of the parent $scope.

$rootScope, parent and child Controller’s $scope Code example

Each controller has its own space/ scope, but the root scope can be accessed all over the application. In other words, root scope is the parent of all scopes and is for the entire application module.

<!DOCTYPE html>
<html>
<head>
<title>AngularJS $root Scope and Child $scope</title>
</head>
<body ng-app="ngApp">
<div ng-controller="parentController"> Controller Name: {{controllerName}} <br />
{{ greetings }} <br />
<div ng-controller="childController"> Controller Name: {{controllerName}} <br />
{{ greetings }} <br />
</div>
</div>
<div ng-controller="siblingController"> Controller Name: {{controllerName}} <br /> Message: {{message}} <br />
</div>
</body>
</html>

Javascript controller and scope Code:

var ngApp = angular.module('myNgApp', []);
ngApp.controller('parentController', function ($scope, $rootScope) {
$scope.controllerName ="parent Controller at root level";
$rootScope.greetings ="Hello, I am from root scope";
});
ngApp.controller('childController', function ($scope) {
$scope.controllerName ="first child Controller";
});
ngApp.controller('siblingController', function ($scope) {
$scope.controllerName ="Second child Controller";
});
div ng-controller="parentController"
This is parent controller at top div level, it has two nested div, each having their own controller.
div ng-controller="childController"
div ng-controller="siblingController"
These two are child controllers of parent controller and siblings to each other. In first-child controller {{ greetings }} is coming from root controller

$rootScope

$rootScope is available to all the controllers; here, we are inserting root scope to parent controller; this root controller can be accessed by any child controller.

At times root scope is used in AngularJS applications to store some common data and access it throughout the application uniformly.

Model Mutation and $scope

All the $scopes in angularJS has a watch API provided by AngularJS framework to observe changes in model data, watch propagates changes with the particular scope object, and UI template associated with that $scope is updated per changes in Model. Scopes also provide another API called $apply to propagate any model changes through the system into the view from outside of the “AngularJS realm” (controllers, services, and other AngularJS event handlers).

In a nutshell, $scope is very important in AngularJS frameworks that encapsulate view and model and helps us to achieve two-way data binding.

Recommended Articles

This is a guide to Scope in AngularJS. Here we discuss the Introduction, What is $rootScope?, Properties, and methods with examples. You may also have a look at the following articles to learn more –

  1. AngularJS ng-if
  2. AngularJS Number Filter
  3. AngularJS Date Filter
  4. AngularJS ng-class
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more