If you are interested to learn about the Angular Js Controllers
The scope is the binding part between the HTML (view) and the JavaScript (controller). The scope is an object with the available properties and methods. The scope is available for both the view and the controller. The Scope in Angular JS 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. When you make a controller in AngularJS, you pass the $scope object as an argument:
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
Properties made in the controller, can be referred to in the view:
<div ng-app="myApp" ng-controller="myCtrl"> <
h1>{{carname}}</h1> </div> <
script><br>var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {<br> $scope.carname = "Volvo";<br>});
<br></script>When adding properties to the $scope object in the controller, the view (HTML) gets access to these properties. In the view, you do not use the prefix $scope, you just refer to a property name, like {{carname}}.
Understanding the Scope
If we consider an AngularJS application to consist of:
- View, which is the HTML.
- Model, which is the data available for the current view.
- Controller, which is the JavaScript function that makes/changes/removes/controls the data.
Then the scope is the Model. The scope is a JavaScript object with properties and methods, which are available for both the view and the controller.
Example
If you make changes in the view, the model and the controller will be updated:
<div ng-app="myApp" ng-controller="myCtrl"> <
input ng-model="name"> <
h1>My name is {{name}}</h1> </div> <
script><br>var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) {<br> $scope.name = "John Doe";<br>});<br></script>Know Your Scope
It is important to know which scope you are dealing with, at any time. In the two examples above there is only one scope, so knowing your scope is not an issue, but for larger applications there can be sections in the HTML DOM which can only access certain scopes.
Example
When dealing with the ng-repeat directive, each repetition has access to the current repetition object:
<div ng-app="myApp" ng-controller="myCtrl"> <
ul><br> <
li ng-repeat="x in names">{{x}}<
/li> </ul> <
/div> <
script><br>var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {<br> $scope.names = ["Emil", "Tobias", "Linus"];
<br>});<br></script>Each <li> element has access to the current repetition object, in this case a string, which is referred to by using x.
Root Scope
All applications have a $rootScope which is the scope created on the HTML element that contains the ng-app directive. The rootScope is available in the entire application. If a variable has the same name in both the current scope and in the rootScope, the application uses the one in the current scope.
Example
A variable named “color” exists in both the controller’s scope and in the rootScope:
<body ng-app="myApp"> <p>The rootScope's favorite color:<
/p><br><h1>{{color}}<
/h1> <div ng-controller="myCtrl"><br> <
p>The scope of the controller's favorite color:<
/p><br> <h1>{{color}}</h1><br><
/div> <
p>The rootScope's favorite color is still:<
/p><br><
h1>{{color}}</h1> <script><br>var app = angular.module('myApp', []);<br>app.run(function($rootScope) {<br> $rootScope.color = 'blue';<br>});<br>app.controller('myCtrl', function($scope) {<br> $scope.color = "red";
<br>});<br></script><br></body>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.
<code><!DOCTYPE html><br><html >
<br><
head><br><title>
AngularJS $scope example<
/title><br>Include angularJS library here to include it in project<br><
/head><br><body ng-app="myApp"><br><div ng-controller="'firstController'"> Greetings: <br /><br>{{message}}+‘ ‘+ {{name}}<br /><br></div><br></body><br></html></code>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.
$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.
<code><!DOCTYPE html><br><html><br><head><br><
title>AngularJS $root Scope and Child $scope<
/title>
<br></head><br><body ng-app="ngApp">
<br><div ng-controller="parentController">
Controller Name: {{controllerName}} <
br /><br>{{ greetings }} <
br /><br><div ng-controller="childController">
Controller Name: {{controllerName}} <br /><br>{{ greetings }} <br /><br></div>
<br></div><br><div ng-controller="siblingController"> Controller Name: {{controllerName}} <br /> Message: {{message}} <br /><br></div><br></body><br></html></code>Javascript controller and scope Code:
<code>var ngApp = angular.module('myNgApp', []);
<br>ngApp.controller('parentController',
function ($scope, $rootScope) {<br>$scope.controllerName ="parent Controller at root level";
<br>$rootScope.greetings ="Hello, I am from root scope";<br>});
<br>ngApp.controller('childController', function ($scope) {<br>$scope.controllerName ="first child Controller";
<br>});
<br>ngApp.controller('siblingController', function ($scope) {<br>$scope.controllerName ="Second child Controller";<br>});
<br>div ng-controller="parentController"<br>This is parent controller at top div level, it has two nested div, each having their own controller.<br>div ng-controller="childController"<br>div ng-controller="siblingController"<br>These two are child controllers of parent controller and siblings to each other. In first-child controller {{ greetings }} is coming from root controller</code>$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).
