Learning AngularJS Basics | Part 3

AngularJS Scopes

In our previous lesson, we discussed about basic components of an AngularJS application, what is an AngularJS Module and what is an AngularJS Controller.


Objective

In this lesson, we are intended to learn the following:

  1. AngularJS Scopes

Let’s begin…

AngularJS Scopes

We’ll be discussing two types of scopes:

  1. $scope
  2. $rootScope

> $scope

As we all know after the last lesson, that whenever you write a controller in AngularJS, it looks something like this:

<script>
     var app = angular.module(“appModule”, []);
     app.controller('appController', function( $scope ) {
// Code inside the controller
};
</script>

If you notice, you’ll see that we passed $scope object as an argument.

So in easy words$scope is an object — and if we add any properties to this object, those properties will be accessible in the view (HTML).

Talk about MVC

As we already know that MVC stands for Model View Controller. The job of Model, View and Controller is as follows:

  1. Model: All the data available for the current view.
  2. View: Everything you see, in our case HTML
  3. Controller: Javascript functions that make changes to data.

Hence according to the previous explanation, $scope refers to Model.

Let’s look at some examples.

Example | AngularJS Scopes

Problem statement: Create a module and controller called appModule and appController respectively. Then in that controller, create a variable called name and print that name in your view (HTML).

Solution: Please have a look at the following code and try to understand it.

<script>
var app = angular.module(“appModule”, []);
app.controller('appController', function( $scope ) {
$scope.name = "Fahad A. Chaudhry";
};
</script>
<body ng-app="appModule" ng-controller="appController">
{{ name }}
</body>

Explanation: We begin by passing $scope object as an argument in controller. Then inside the controller, we create a new property associated to $scope called name.

To show this name in the view (HTML), we use expression notation and simply write the name of the property inside double-curly-brackets,
ie: {{ name }}

So we understand that in view we don’t use $scope as a prefix, rather we simply write the property name in double-curly-brackets.

> $rootScope

As we now understand that a $scope is only limited to one controller. There exists another scope that is available in the entire application. It’s called $rootScope. Adding properties to $rootScope is same as adding to $scope

$rootScope.newProperty = "This is a new property";

And if you want to show the value of your $rootScope in the View then you’ll use exactly same method, ie: just write the property name in between double-curly-brackets

{{ newProperty }}

$rootScope is a scope that is created on HTML elements that are enclosed by ng-app directive whereas $scope is limited to HTML elements that are enclosed in ng-controller directive.

<script>
var app = angular.module(“appModule”, []);
app.run(function( $rootScope ) {
$rootScope.name = "Name from rootScope";
});
app.controller('appController', function( $scope ) {
$scope.name = "Name from scope";
};
</script>
<body ng-app="appModule">

{{ name }} <!-- $rootScope -->
     <div ng-controller="appController">
{{ name }} <!-- $scope -->
</div>
</body>

How to name your scopes?

There is a general misunderstanding about how to name your scopes. Let me explain:

Scenario: Say you add a property called bananasCount to your $scope, is it allowed to add a property with same name to your $rootScope?

Answer: Yes, it is allowed, since your $scope and $rootScope are two different objects, so it doesn’t matter if both have same property-names.

Conclusion

In this lesson, we tried to cover the following areas:

  1. AngularJS Scopes

In the next Article

In the next article, we’ll try to understand the following topics:

  1. AngularJS Data Binding

Up next:
Learning AngularJS Basics | Part 4: Data Binding
Coming soon > > >

Thank you for reading this article. Hope it was helpful. If you liked it, please give it a ❤ and I’ll see you next time…

Get in touch

Email: sh.fahadashraf@gmail.com | Facebook | Instagram | About