SlideShare a Scribd company logo
InterviewGully.com 
Understanding AngularJS $rootScope and $scope 
Scope is an object that refers to the application model. it acts as glue between controller and view. 
Scopes are hierarchical in nature and follow the DOM (Document Object Model) structure of your 
angular app. 
AngularJS has two scope objects: $rootScope and $scope. 
$scope 
A $scope is a JavaScript object which is used for communication between controller and view. Basically, 
$scope binds a view (DOM element) to the view model and functions defined in a controller. 
$rootScope 
The $rootScope is the top-most scope. An app can have only one $rootScope which will be shared 
among all the components of an app. Hence it acts like a global variable. All other $scopes are children 
of the $rootScope. 
AngularJS: $rootScope and $scope with example 
external.js 
//defining module 
var app = angular.module('IG', []); 
//the run function acts as a main method for the angular app. 
app.run(function ($rootScope) { 
$rootScope.site = "interviewgully.com"; 
$rootScope.name = "Brajesh Kumar" 
}); 
app.controller("myController", function ($scope, $rootScope) { 
$scope.name = "Sujeet Srivastava"; 
$scope.welcome = "Welcome to " + $rootScope.site; 
}); 
app.controller("testController", function ($scope, $rootScope) { 
$scope.welcome = "Welcome to " + $rootScope.site; 
});
InterviewGully.com 
index.html 
<!DOCTYPE html> 
<html ng-app="IG"> 
<head> 
<title>AngularJS rootScope and scope :: InterviewGully.com</title> 
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script> 
<script src="Scripts/external.js"></script> 
</head> 
<body> 
<div ng-controller="myController"> 
<h1>rootScopeController</h1> 
<p>rootScope: {{site}}</p> 
<!--changes in site will be done on controller level(myController level) rootScope 
not global rootScope object--> 
<p>rootScope(ng-model): <input type="text" ng-model="site" /></p> 
<p>welcome from scope: {{welcome}}</p> 
<p>welcome from scope(ng-model): <input type="text" ng-model="welcome" /></p> 
<p>scope: {{name}}</p> 
</div> 
<div ng-controller="testController"> 
<h1>ScopeController</h1> 
<p>rootScope: {{site}}</p> 
<!--changes in site will be done on controller level(testController level) rootScope 
not global rootScope object--> 
<p>rootScope(ng-model): <input type="text" ng-model="site" /></p> 
<p>welcome from scope: {{welcome}}</p> 
<p>name from rootScope: {{name}}</p> 
</div> 
<div> 
<h1>Outside from both Controller</h1> 
<p>name from rootScope: {{name}}</p> 
<p>site from rootScope: {{site}}</p> 
</div> 
</body> 
</html>
InterviewGully.com 
How it works 
1. When you use ng-model with $rootScope objects then AngularJS updates those objects under a 
specific $scope of a controller but not at global level $rootScope. 
2. Create a private $scope for each controller to bind it to the view.

More Related Content

What's hot (20)

Angular js PPT
Angular js PPTAngular js PPT
Angular js PPT
Imtiyaz Ahmad Khan
 
Angular js for beginners
Angular js for beginnersAngular js for beginners
Angular js for beginners
Munir Hoque
 
Angular js
Angular jsAngular js
Angular js
Dinusha Nandika
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
Jussi Pohjolainen
 
AngularJS: an introduction
AngularJS: an introductionAngularJS: an introduction
AngularJS: an introduction
Luigi De Russis
 
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosAngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
Learnimtactics
 
Angular js
Angular jsAngular js
Angular js
ParmarAnisha
 
Understanding angular js
Understanding angular jsUnderstanding angular js
Understanding angular js
Aayush Shrestha
 
Building an End-to-End AngularJS Application
Building an End-to-End AngularJS ApplicationBuilding an End-to-End AngularJS Application
Building an End-to-End AngularJS Application
Dan Wahlin
 
Angular Js Basics
Angular Js BasicsAngular Js Basics
Angular Js Basics
أحمد عبد الوهاب
 
Advanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JSAdvanced Tips & Tricks for using Angular JS
Advanced Tips & Tricks for using Angular JS
Simon Guest
 
AngularJS
AngularJSAngularJS
AngularJS
Hiten Pratap Singh
 
AngularJS Best Practices
AngularJS Best PracticesAngularJS Best Practices
AngularJS Best Practices
Betclic Everest Group Tech Team
 
Introduction to AngularJS
Introduction to AngularJSIntroduction to AngularJS
Introduction to AngularJS
David Parsons
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
Manish Shekhawat
 
AngularJS Beginners Workshop
AngularJS Beginners WorkshopAngularJS Beginners Workshop
AngularJS Beginners Workshop
Sathish VJ
 
AngularJS intro
AngularJS introAngularJS intro
AngularJS intro
dizabl
 
Angular directive filter and routing
Angular directive filter and routingAngular directive filter and routing
Angular directive filter and routing
jagriti srivastava
 
Angular js
Angular jsAngular js
Angular js
Knoldus Inc.
 
AngularJS
AngularJSAngularJS
AngularJS
Maurice De Beijer [MVP]
 

Viewers also liked (12)

Resume (2)
Resume (2)Resume (2)
Resume (2)
Debasish Panda
 
Rizwana-Shaikh_Angular JS Profile
Rizwana-Shaikh_Angular JS ProfileRizwana-Shaikh_Angular JS Profile
Rizwana-Shaikh_Angular JS Profile
Rizwana Shaikh
 
Chandra Sekhar Cheekuru NET UI
Chandra Sekhar Cheekuru  NET UIChandra Sekhar Cheekuru  NET UI
Chandra Sekhar Cheekuru NET UI
Chandra Sekhar
 
Patricia.Mattesi.Resume
Patricia.Mattesi.ResumePatricia.Mattesi.Resume
Patricia.Mattesi.Resume
Mattesi Patty
 
Stephanie Stoffella Resume
Stephanie Stoffella ResumeStephanie Stoffella Resume
Stephanie Stoffella Resume
Stephanie Stoffella, MBA
 
ABarker 2016
ABarker 2016ABarker 2016
ABarker 2016
Autumn Barker
 
Leo Fang Resume Revised 8.21.14
Leo Fang Resume Revised 8.21.14Leo Fang Resume Revised 8.21.14
Leo Fang Resume Revised 8.21.14
Xiangyi Fang
 
Fundamentals and Implementations of Angular JS with renowned Technology Platf...
Fundamentals and Implementations of Angular JS with renowned Technology Platf...Fundamentals and Implementations of Angular JS with renowned Technology Platf...
Fundamentals and Implementations of Angular JS with renowned Technology Platf...
OptiSol Business Solutions
 
Real estate investor business plan
Real estate investor business planReal estate investor business plan
Real estate investor business plan
laburun
 
Resume_Cheryl Hunnicutt 2015 no address
Resume_Cheryl Hunnicutt 2015 no addressResume_Cheryl Hunnicutt 2015 no address
Resume_Cheryl Hunnicutt 2015 no address
Cheryl Hunnicutt
 
About Workday
About WorkdayAbout Workday
About Workday
Workday
 
Bruce Laymon Updated Resume 2015
Bruce Laymon Updated Resume 2015Bruce Laymon Updated Resume 2015
Bruce Laymon Updated Resume 2015
Bruce Laymon
 
Rizwana-Shaikh_Angular JS Profile
Rizwana-Shaikh_Angular JS ProfileRizwana-Shaikh_Angular JS Profile
Rizwana-Shaikh_Angular JS Profile
Rizwana Shaikh
 
Chandra Sekhar Cheekuru NET UI
Chandra Sekhar Cheekuru  NET UIChandra Sekhar Cheekuru  NET UI
Chandra Sekhar Cheekuru NET UI
Chandra Sekhar
 
Patricia.Mattesi.Resume
Patricia.Mattesi.ResumePatricia.Mattesi.Resume
Patricia.Mattesi.Resume
Mattesi Patty
 
Leo Fang Resume Revised 8.21.14
Leo Fang Resume Revised 8.21.14Leo Fang Resume Revised 8.21.14
Leo Fang Resume Revised 8.21.14
Xiangyi Fang
 
Fundamentals and Implementations of Angular JS with renowned Technology Platf...
Fundamentals and Implementations of Angular JS with renowned Technology Platf...Fundamentals and Implementations of Angular JS with renowned Technology Platf...
Fundamentals and Implementations of Angular JS with renowned Technology Platf...
OptiSol Business Solutions
 
Real estate investor business plan
Real estate investor business planReal estate investor business plan
Real estate investor business plan
laburun
 
Resume_Cheryl Hunnicutt 2015 no address
Resume_Cheryl Hunnicutt 2015 no addressResume_Cheryl Hunnicutt 2015 no address
Resume_Cheryl Hunnicutt 2015 no address
Cheryl Hunnicutt
 
About Workday
About WorkdayAbout Workday
About Workday
Workday
 
Bruce Laymon Updated Resume 2015
Bruce Laymon Updated Resume 2015Bruce Laymon Updated Resume 2015
Bruce Laymon Updated Resume 2015
Bruce Laymon
 
Ad

Similar to Understanding angular js $rootscope and $scope (20)

AngularJS Scopes
AngularJS ScopesAngularJS Scopes
AngularJS Scopes
Mohamed Elkhodary
 
What is $root scope in angularjs
What is $root scope in angularjsWhat is $root scope in angularjs
What is $root scope in angularjs
codeandyou forums
 
Angular js
Angular jsAngular js
Angular js
Baldeep Sohal
 
Single Page Applications Workshop Part II: Single Page Applications using Ang...
Single Page Applications Workshop Part II: Single Page Applications using Ang...Single Page Applications Workshop Part II: Single Page Applications using Ang...
Single Page Applications Workshop Part II: Single Page Applications using Ang...
Jalal Mostafa
 
Angular workshop - Full Development Guide
Angular workshop - Full Development GuideAngular workshop - Full Development Guide
Angular workshop - Full Development Guide
Nitin Giri
 
Angularjs scope part 02
Angularjs scope part 02Angularjs scope part 02
Angularjs scope part 02
Mohd Abdul Baquee
 
Step by Step - AngularJS
Step by Step - AngularJSStep by Step - AngularJS
Step by Step - AngularJS
Infragistics
 
Basics of AngularJS
Basics of AngularJSBasics of AngularJS
Basics of AngularJS
Filip Janevski
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
Ravi Mone
 
An Intro to AngularJS
An Intro to AngularJSAn Intro to AngularJS
An Intro to AngularJS
Kentucky JavaScript Users Group
 
AgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllersAgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllers
jobinThomas54
 
Scope in AngularJs
Scope in AngularJsScope in AngularJs
Scope in AngularJs
Thien To
 
AngularJS Basic Training
AngularJS Basic TrainingAngularJS Basic Training
AngularJS Basic Training
Cornel Stefanache
 
Mini-Training: AngularJS
Mini-Training: AngularJSMini-Training: AngularJS
Mini-Training: AngularJS
Betclic Everest Group Tech Team
 
Dive into Angular, part 1: Introduction
Dive into Angular, part 1: IntroductionDive into Angular, part 1: Introduction
Dive into Angular, part 1: Introduction
Oleksii Prohonnyi
 
Get AngularJS Started!
Get AngularJS Started!Get AngularJS Started!
Get AngularJS Started!
Dzmitry Ivashutsin
 
Angular js
Angular jsAngular js
Angular js
Arun Somu Panneerselvam
 
Angular js 1.3 presentation for fed nov 2014
Angular js 1.3 presentation for fed   nov 2014Angular js 1.3 presentation for fed   nov 2014
Angular js 1.3 presentation for fed nov 2014
Sarah Hudson
 
AngularJS
AngularJSAngularJS
AngularJS
LearningTech
 
Hands on AngularJS
Hands on AngularJSHands on AngularJS
Hands on AngularJS
Thomas Fankhauser
 
What is $root scope in angularjs
What is $root scope in angularjsWhat is $root scope in angularjs
What is $root scope in angularjs
codeandyou forums
 
Single Page Applications Workshop Part II: Single Page Applications using Ang...
Single Page Applications Workshop Part II: Single Page Applications using Ang...Single Page Applications Workshop Part II: Single Page Applications using Ang...
Single Page Applications Workshop Part II: Single Page Applications using Ang...
Jalal Mostafa
 
Angular workshop - Full Development Guide
Angular workshop - Full Development GuideAngular workshop - Full Development Guide
Angular workshop - Full Development Guide
Nitin Giri
 
Step by Step - AngularJS
Step by Step - AngularJSStep by Step - AngularJS
Step by Step - AngularJS
Infragistics
 
AngularJS Basics
AngularJS BasicsAngularJS Basics
AngularJS Basics
Ravi Mone
 
AgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllersAgularJS basics- angular directives and controllers
AgularJS basics- angular directives and controllers
jobinThomas54
 
Scope in AngularJs
Scope in AngularJsScope in AngularJs
Scope in AngularJs
Thien To
 
Dive into Angular, part 1: Introduction
Dive into Angular, part 1: IntroductionDive into Angular, part 1: Introduction
Dive into Angular, part 1: Introduction
Oleksii Prohonnyi
 
Angular js 1.3 presentation for fed nov 2014
Angular js 1.3 presentation for fed   nov 2014Angular js 1.3 presentation for fed   nov 2014
Angular js 1.3 presentation for fed nov 2014
Sarah Hudson
 
Ad

Recently uploaded (20)

Analysis of Quantitative Data Parametric and non-parametric tests.pptx
Analysis of Quantitative Data Parametric and non-parametric tests.pptxAnalysis of Quantitative Data Parametric and non-parametric tests.pptx
Analysis of Quantitative Data Parametric and non-parametric tests.pptx
Shrutidhara2
 
Paper 109 | Archetypal Journeys in ‘Interstellar’: Exploring Universal Themes...
Paper 109 | Archetypal Journeys in ‘Interstellar’: Exploring Universal Themes...Paper 109 | Archetypal Journeys in ‘Interstellar’: Exploring Universal Themes...
Paper 109 | Archetypal Journeys in ‘Interstellar’: Exploring Universal Themes...
Rajdeep Bavaliya
 
SPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptx
SPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptxSPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptx
SPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptx
Sourav Kr Podder
 
What are the benefits that dance brings?
What are the benefits that dance brings?What are the benefits that dance brings?
What are the benefits that dance brings?
memi27
 
MATERI PPT TOPIK 1 LANDASAN FILOSOFIS PENDIDIKAN
MATERI PPT TOPIK 1 LANDASAN FILOSOFIS PENDIDIKANMATERI PPT TOPIK 1 LANDASAN FILOSOFIS PENDIDIKAN
MATERI PPT TOPIK 1 LANDASAN FILOSOFIS PENDIDIKAN
aditya23173
 
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_HyderabadWebcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Veera Pallapu
 
Publishing Your Memoir with Brooke Warner
Publishing Your Memoir with Brooke WarnerPublishing Your Memoir with Brooke Warner
Publishing Your Memoir with Brooke Warner
Brooke Warner
 
Overview of Employee in Odoo 18 - Odoo Slides
Overview of Employee in Odoo 18 - Odoo SlidesOverview of Employee in Odoo 18 - Odoo Slides
Overview of Employee in Odoo 18 - Odoo Slides
Celine George
 
PEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptx
PEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptxPEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptx
PEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptx
Arshad Shaikh
 
Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptx
Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptxRai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptx
Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptx
Dr. Ravi Shankar Arya Mahila P. G. College, Banaras Hindu University, Varanasi, India.
 
The Man In The Back – Exceptional Delaware.pdf
The Man In The Back – Exceptional Delaware.pdfThe Man In The Back – Exceptional Delaware.pdf
The Man In The Back – Exceptional Delaware.pdf
dennisongomezk
 
ROLE PLAY: FIRST AID -CPR & RECOVERY POSITION.pptx
ROLE PLAY: FIRST AID -CPR & RECOVERY POSITION.pptxROLE PLAY: FIRST AID -CPR & RECOVERY POSITION.pptx
ROLE PLAY: FIRST AID -CPR & RECOVERY POSITION.pptx
Belicia R.S
 
Basic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Basic English for Communication - Dr Hj Euis Eti Rohaeti MpdBasic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Basic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Restu Bias Primandhika
 
BINARY files CSV files JSON files with example.pptx
BINARY files CSV files JSON files with example.pptxBINARY files CSV files JSON files with example.pptx
BINARY files CSV files JSON files with example.pptx
Ramakrishna Reddy Bijjam
 
Unit 3 Poster Sketches with annotations.pptx
Unit 3 Poster Sketches with annotations.pptxUnit 3 Poster Sketches with annotations.pptx
Unit 3 Poster Sketches with annotations.pptx
bobby205207
 
Final Sketch Designs for poster production.pptx
Final Sketch Designs for poster production.pptxFinal Sketch Designs for poster production.pptx
Final Sketch Designs for poster production.pptx
bobby205207
 
Black and White Illustrative Group Project Presentation.pdf (1).pdf
Black and White Illustrative Group Project Presentation.pdf (1).pdfBlack and White Illustrative Group Project Presentation.pdf (1).pdf
Black and White Illustrative Group Project Presentation.pdf (1).pdf
AnnasofiaUrsini
 
Nice Dream.pdf /
Nice Dream.pdf                              /Nice Dream.pdf                              /
Nice Dream.pdf /
ErinUsher3
 
Battle of Bookworms 2025 - U25 Literature Quiz by Pragya
Battle of Bookworms 2025 - U25 Literature Quiz by Pragya Battle of Bookworms 2025 - U25 Literature Quiz by Pragya
Battle of Bookworms 2025 - U25 Literature Quiz by Pragya
Pragya - UEM Kolkata Quiz Club
 
LDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDMMIA Free Reiki Yoga S9 Grad Level Intuition IILDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDM & Mia eStudios
 
Analysis of Quantitative Data Parametric and non-parametric tests.pptx
Analysis of Quantitative Data Parametric and non-parametric tests.pptxAnalysis of Quantitative Data Parametric and non-parametric tests.pptx
Analysis of Quantitative Data Parametric and non-parametric tests.pptx
Shrutidhara2
 
Paper 109 | Archetypal Journeys in ‘Interstellar’: Exploring Universal Themes...
Paper 109 | Archetypal Journeys in ‘Interstellar’: Exploring Universal Themes...Paper 109 | Archetypal Journeys in ‘Interstellar’: Exploring Universal Themes...
Paper 109 | Archetypal Journeys in ‘Interstellar’: Exploring Universal Themes...
Rajdeep Bavaliya
 
SPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptx
SPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptxSPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptx
SPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptx
Sourav Kr Podder
 
What are the benefits that dance brings?
What are the benefits that dance brings?What are the benefits that dance brings?
What are the benefits that dance brings?
memi27
 
MATERI PPT TOPIK 1 LANDASAN FILOSOFIS PENDIDIKAN
MATERI PPT TOPIK 1 LANDASAN FILOSOFIS PENDIDIKANMATERI PPT TOPIK 1 LANDASAN FILOSOFIS PENDIDIKAN
MATERI PPT TOPIK 1 LANDASAN FILOSOFIS PENDIDIKAN
aditya23173
 
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_HyderabadWebcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Veera Pallapu
 
Publishing Your Memoir with Brooke Warner
Publishing Your Memoir with Brooke WarnerPublishing Your Memoir with Brooke Warner
Publishing Your Memoir with Brooke Warner
Brooke Warner
 
Overview of Employee in Odoo 18 - Odoo Slides
Overview of Employee in Odoo 18 - Odoo SlidesOverview of Employee in Odoo 18 - Odoo Slides
Overview of Employee in Odoo 18 - Odoo Slides
Celine George
 
PEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptx
PEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptxPEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptx
PEST OF WHEAT SORGHUM BAJRA and MINOR MILLETS.pptx
Arshad Shaikh
 
The Man In The Back – Exceptional Delaware.pdf
The Man In The Back – Exceptional Delaware.pdfThe Man In The Back – Exceptional Delaware.pdf
The Man In The Back – Exceptional Delaware.pdf
dennisongomezk
 
ROLE PLAY: FIRST AID -CPR & RECOVERY POSITION.pptx
ROLE PLAY: FIRST AID -CPR & RECOVERY POSITION.pptxROLE PLAY: FIRST AID -CPR & RECOVERY POSITION.pptx
ROLE PLAY: FIRST AID -CPR & RECOVERY POSITION.pptx
Belicia R.S
 
Basic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Basic English for Communication - Dr Hj Euis Eti Rohaeti MpdBasic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Basic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Restu Bias Primandhika
 
BINARY files CSV files JSON files with example.pptx
BINARY files CSV files JSON files with example.pptxBINARY files CSV files JSON files with example.pptx
BINARY files CSV files JSON files with example.pptx
Ramakrishna Reddy Bijjam
 
Unit 3 Poster Sketches with annotations.pptx
Unit 3 Poster Sketches with annotations.pptxUnit 3 Poster Sketches with annotations.pptx
Unit 3 Poster Sketches with annotations.pptx
bobby205207
 
Final Sketch Designs for poster production.pptx
Final Sketch Designs for poster production.pptxFinal Sketch Designs for poster production.pptx
Final Sketch Designs for poster production.pptx
bobby205207
 
Black and White Illustrative Group Project Presentation.pdf (1).pdf
Black and White Illustrative Group Project Presentation.pdf (1).pdfBlack and White Illustrative Group Project Presentation.pdf (1).pdf
Black and White Illustrative Group Project Presentation.pdf (1).pdf
AnnasofiaUrsini
 
Nice Dream.pdf /
Nice Dream.pdf                              /Nice Dream.pdf                              /
Nice Dream.pdf /
ErinUsher3
 
Battle of Bookworms 2025 - U25 Literature Quiz by Pragya
Battle of Bookworms 2025 - U25 Literature Quiz by Pragya Battle of Bookworms 2025 - U25 Literature Quiz by Pragya
Battle of Bookworms 2025 - U25 Literature Quiz by Pragya
Pragya - UEM Kolkata Quiz Club
 
LDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDMMIA Free Reiki Yoga S9 Grad Level Intuition IILDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDM & Mia eStudios
 

Understanding angular js $rootscope and $scope

  • 1. InterviewGully.com Understanding AngularJS $rootScope and $scope Scope is an object that refers to the application model. it acts as glue between controller and view. Scopes are hierarchical in nature and follow the DOM (Document Object Model) structure of your angular app. AngularJS has two scope objects: $rootScope and $scope. $scope A $scope is a JavaScript object which is used for communication between controller and view. Basically, $scope binds a view (DOM element) to the view model and functions defined in a controller. $rootScope The $rootScope is the top-most scope. An app can have only one $rootScope which will be shared among all the components of an app. Hence it acts like a global variable. All other $scopes are children of the $rootScope. AngularJS: $rootScope and $scope with example external.js //defining module var app = angular.module('IG', []); //the run function acts as a main method for the angular app. app.run(function ($rootScope) { $rootScope.site = "interviewgully.com"; $rootScope.name = "Brajesh Kumar" }); app.controller("myController", function ($scope, $rootScope) { $scope.name = "Sujeet Srivastava"; $scope.welcome = "Welcome to " + $rootScope.site; }); app.controller("testController", function ($scope, $rootScope) { $scope.welcome = "Welcome to " + $rootScope.site; });
  • 2. InterviewGully.com index.html <!DOCTYPE html> <html ng-app="IG"> <head> <title>AngularJS rootScope and scope :: InterviewGully.com</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script> <script src="Scripts/external.js"></script> </head> <body> <div ng-controller="myController"> <h1>rootScopeController</h1> <p>rootScope: {{site}}</p> <!--changes in site will be done on controller level(myController level) rootScope not global rootScope object--> <p>rootScope(ng-model): <input type="text" ng-model="site" /></p> <p>welcome from scope: {{welcome}}</p> <p>welcome from scope(ng-model): <input type="text" ng-model="welcome" /></p> <p>scope: {{name}}</p> </div> <div ng-controller="testController"> <h1>ScopeController</h1> <p>rootScope: {{site}}</p> <!--changes in site will be done on controller level(testController level) rootScope not global rootScope object--> <p>rootScope(ng-model): <input type="text" ng-model="site" /></p> <p>welcome from scope: {{welcome}}</p> <p>name from rootScope: {{name}}</p> </div> <div> <h1>Outside from both Controller</h1> <p>name from rootScope: {{name}}</p> <p>site from rootScope: {{site}}</p> </div> </body> </html>
  • 3. InterviewGully.com How it works 1. When you use ng-model with $rootScope objects then AngularJS updates those objects under a specific $scope of a controller but not at global level $rootScope. 2. Create a private $scope for each controller to bind it to the view.