21 Point Cheat Sheet on AngularJS Controller and the $scope Object

Dhananjay Kumar
9y
12.7k
0
4

Article

This article is a 21-point cheat sheet on the AngularJS Controller and the $scope object. These points can be used as quick notes when working with two important components of the Angular app Controller and the $scope object.

Notes on $scope object

$scope is a glue between the View and the Controller. It connects a Controller with the View.

scope

$scope serves as the glue between the Controller and the View.
The $scope is the connection between the HTML and the View.
The View and the model both have access to the $scope.
In the context of MVC, $scope can be seen as the ViewModel.
$scope provides the execution context for the DOM and the expression.
$scope provides an execution context in which the DOM element is bound.
$scope is the source of the truth.
$scope is modified when the View changes and the View is modified when $the scope changes its value.
The $scope object is a plain JavaScript object. We can add and remove a property as required.
$scope holds data and functions from the Controller that should be displayed and executed in the View.
The $rootScope is the eventual parent of all the $scope.
$rootScope is the top-most scope in a DOM element with the ng-app directive.
In angular all the $scope are created with prototypal inheritance.
$scope has access to their parent scope.
$scope contains data and the functionality to be used to render the View.
For each Controller created a new $scope is created.
It is ideal to contain the application logic in the Controller and the data in the $scope of the Controller.
When $the scope object is not needed in the View, the scope will be cleaned up and destroyed.
Directives do not have their own scope but with some exceptions ng-controller and ng-repeat do.
When angular starts running all the $scope are attached to the View.
$scope passes data and behavior to the View.

Example: Adding property to $rootScope

To add a property to $rootScope directly, pass a $rootScope as the parameter to the Controller as shown below. However it is not advisable to add properties to $rootScope directly.

var myApp = angular.module('myApp', []);
myApp.controller('RootController', ['$rootScope', function ($rootScope) {
$rootScope.name = "dj";
}]);

On the DOM added property of $rootScope can be rendered in the expression as shown below:

<div ng-controller="RootController">
<h1>{{name}}</h1>
</div>

Another way you can add a property to the $rootScope object directly using the run method on the application module.

angular.module('myApp', [])
.run(function ($rootScope) {
$rootScope.name = "World";
});

To use this you don't need a Controller to attach with the View and can be used in the application as shown below:

<div ng-app="myApp">
Hello {{name}}
</div>

Notes on the Controller

The Controller adds behaviour and data to the $scope object. It is created on the View using this ng-controller directive. Each Controller has its own $scope object.

It's a JavaScript constructor function that is used to augment the $scope object.
The Controller takes $scope as parameter and attaches data and behavior to this.
The Controller is attached to the DOM using the ng-controller directive.
Each Controller has its own child $scope.
The Controller sets up the initial state of the $scope object.
The Controller adds behavior to the $scope object.
Do not use a Controller to manipulate the DOM, it should only contain the business login, not the DOM manipulation.
Do not use a Controller to format the input.
Do not use a Controller to filter the output.
Do not use a Controller to share the code across Controllers.
Never create the service instance inside the Controller.
A Controller should mainly contain simple business logic.
It should not try to do many things.
All the common functionality should go in the service and the later service can be injected into the Controller via dependencies.
The Controller name starts with a capital letter and ends with Controller.
Whenever a new Controller is created on the page, angular passes a $scope object to it.
Custom actions to be called from the View can be created as the behavior of the function in the Controller augmenting the $scope object.
A Controller can be attached to a different level of the DOM hierarchy, hence it creates a hierarchy of the $scope.
$scope in a child Controller can access and override data and behavior attached to $scope of the parent Controller.
Other directives or services to be used in the Controller must be passed as a parameter in the Controller function constructor.
A Controller should provide data and business logic to a specific View.

Example: Creating a simple Controller

Let us create a simple Controller with two functions as behavior and one data. Functions are either adding or subtracting 1 from the counter attached as a property to the $scope object.

var myApp = angular.module('myApp', []);
myApp.controller('mycontroller', ['$scope', function ($scope) {
$scope.counter =0;
$scope.add = function () { $scope.counter += 1;}
$scope.sub = function () { $scope.counter -= 1; }
}]);

On the DOM a Controller can be used as shown below:

<div ng-controller="mycontroller">
<h1>{{counter}}</h1>
<button class="btn btn-info" ng-click="add()">+</button>
<button class="btn btn-danger" ng-click="sub()">-</button>
</div>

When you use a Controller for another DOM element, a new instance of the Controller will be created.

<div ng-controller="mycontroller">
<h1>{{counter}}</h1>
<button class="btn btn-info" ng-click="add()">+</button>
<button class="btn btn-danger" ng-click="sub()">-</button>
</div>

On running the application you will find that both of the div will have different values for the $scope data.

Example: $scope inheritance

Let us create a module with two Controllers, ParentControler and ChildController. As you see, ChildController is overriding the age property on the $scope object.

var myApp = angular.module('myApp', []);
myApp.controller('ParentController', ['$scope', function ($scope) {
$scope.name = "dj";
$scope.age = 32;
}]);
myApp.controller('ChildController', ['$scope', function ($scope) {
$scope.age = 22;
$scope.grade = "A+";
}]);

In the View we have created a ChildController inside the ParentController div. In the ChildController $scope, there is no property called name. So angular will traverse to the ParentController to find the value of the name property. Also you can see that the age property is overridden in the ChildController, so the div attached with the ChildController will render the overridden value of the age property.