IMG-LOGO
Home Tutorial AngularJS Scopes...

AngularJS Scopes...

by MH RISHAD - 03 Jan 2020
IMG

The scope making relation between the HTML (view) and the JavaScript (controller).

The scope is an object and scope have available properties and methods.

Scope is available for both the view and controller.

Using the Scope?

Try to make a controller in AngularJS, you pass the $scope object as an argument:

 

Example 1

Properties into controller, can be referred to in the view:

<div ng-app="FirstApp" ng-controller="FirstCtrl">
<h1>{{NameofCar}}</h1>
</div>
<script>
var app = angular.module('FirstApp', []);
app.controller('FirstCtrl', function($scope) {
  $scope.NameofCar = "Lamborghini";
});
</script>

 

When adding properties into $scope object in controller, the HTML view gets access properties.

In the view, you do not use the prefix $scope, just refer to a property name, like {{NameofCar}}.

 

Scope Understanding

AngularJS application consist of:

View( HTML).

Model, Data are available for the current view.

Controller, Is  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 2

If changes in the view, model and the controller will be updated:

<div ng-app="FirstApp" ng-controller="FirstCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('FirstApp', []);
app.controller('FirstCtrl', function($scope) {
  $scope.name = "John Doe";
});
</script>

 

Known about Scope

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 i

When dealing with the ng-repeat directive, each repetition has access to the current repetition object:

<div ng-app="FirstApp" ng-controller="FirstCtrl">
<ul>
  <li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('FirstApp', []);
app.controller('FirstCtrl', function($scope) {
  $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

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 ii

A variable named "color" exists in both the controller's scope and in the rootScope:

<body ng-app="FirstApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="FirstCtrl">
  <p>The scope of the controller's favorite color:</p>
  <h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is still:</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('FirstApp', []);
app.run(function($rootScope) {
  $rootScope.color = 'blue';
});
app.controller('FirstCtrl', function($scope) {
  $scope.color = "red";
});
</script>
</body>
Share:

Leave a Comment

Required fields are marked *