Controllers

In AngularJS, a Controller is defined by a JavaScript constructor function that is used to augment the AngularJS Scope.

Controllers can be attached to the DOM in different ways. For each of them, AngularJS will instantiate a new Controller object, using the specified Controller’s constructor function:

the ngController directive. A new child scope will be created and made available as an injectable parameter to the Controller’s constructor function as $scope.
a route controller in a $route definition.
the controller of a regular directive, or a component directive.

If the controller has been attached using the controller as syntax then the controller instance will be assigned to a property on the scope.

Use controllers to:

Set up the initial state of the $scope object.
Add behavior to the $scope object.

Do not use controllers to:

Manipulate DOM — Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. AngularJS has databinding for most cases and directives to encapsulate manual DOM manipulation.
Format input — Use AngularJS form controls instead.
Filter output — Use AngularJS filters instead.
Share code or state across controllers — Use AngularJS services instead.
Manage the life-cycle of other components (for example, to create service instances).

In general, a Controller shouldn’t try to do too much. It should contain only the business logic needed for a single view.

The most common way to keep Controllers slim is by encapsulating work that doesn’t belong to controllers into services and then using these services in Controllers via dependency injection.

Controllers should only be used alongside components, never anywhere else. If you feel you need a controller, what you really need is likely a stateless component to manage that particular piece of behaviour.

Here are some advisories for using Class for controllers:

Drop the name “Controller”, i.e. use controller: class TodoComponent {…} to aid future Angular migration
Always use the constructor for dependency injection purposes
Use ng-annotate’s ‘ngInject’; syntax for $inject annotations
If you need to access the lexical scope, use arrow functions
Alternatively to arrow functions, let ctrl = this; is also acceptable and may make more sense depending on the use case
Bind all public functions directly to the Class
Make use of the appropriate lifecycle hooks, $onInit, $onChanges, $postLink and $onDestroy. $onChanges is called before $onInit
Use require alongside $onInit to reference any inherited logic
Do not override the default $ctrl alias for the controllerAs syntax, therefore do not use controllerAs anywhere

AngularJS applications are controlled by controllers. The ng-controller directive defines the application controller. A controller is a JavaScript Object, created by a standard JavaScript object constructor.

Example

First Name: <input type=”text” ng-model=”firstName”><br>

Last Name: <input type=”text” ng-model=”lastName”><br>

<br>

Full Name: {{firstName + ” ” + lastName}}

</div>

var app = angular.module(‘myApp’, []);

app.controller(‘myCtrl’, function($scope) {

$scope.firstName = “Demo”;

$scope.lastName = “User”;

});

</script>

Example explanation

The AngularJS application is defined by ng-app=”myApp”. The application runs inside the <div>. The ng-controller=”myCtrl” attribute is an AngularJS directive. It defines a controller. The myCtrl function is a JavaScript function. AngularJS will invoke the controller with a $scope object. In AngularJS, $scope is the application object (the owner of application variables and functions). The controller creates two properties (variables) in the scope (firstName and lastName). The ng-model directives bind the input fields to the controller properties (firstName and lastName).

Simple Definition

Following is a simple definition of working of Angular JS Controller.

The controller’s primary responsibility is to control the data which gets passed to the view. The scope and the view have two-way communication.
The properties of the view can call “functions” on the scope. Moreover events on the view can call “methods” on the scope.
The function($scope) which is defined when defining the controller and an internal function which is used to return the concatenation of the $scope.firstName and $scope.lastName.
In AngularJS when you define a function as a variable, it is known as a Method.
Data in this way pass from the controller to the scope, and then the data passes back and forth from the scope to the view.
The scope is used to expose the model to the view. The model can be modified via methods defined in the scope which could be triggered via events from the view. We can define two way model binding from the scope to the model.
Controllers should not ideally be used for manipulating the DOM. This should be done by the directives which we will see later on.
Best practice is to have controller’s based on functionality. For example, if you have a form for input and you need a controller for that, create a controller called “form controller”.

Controller Methods

The example above demonstrated a controller object with two properties: lastName and firstName. A controller can also have methods (variables as functions):

Example

First Name: <input type=”text” ng-model=”firstName”><br>

Last Name: <input type=”text” ng-model=”lastName”><br>

<br>

Full Name: {{fullName()}}

</div>

var app = angular.module(‘myApp’, []);

app.controller(‘personCtrl’, function($scope) {

$scope.firstName = “Demo”;

$scope.lastName = “User”;

$scope.fullName = function() {

return $scope.firstName + ” ” + $scope.lastName;

};

});

</script>

Controllers in External Files

In larger applications, it is common to store controllers in external files. Just copy the code between the <script> tags into an external file named personController.js:

Example

First Name: <input type=”text” ng-model=”firstName”><br>

Last Name: <input type=”text” ng-model=”lastName”><br>

<br>

Full Name: {{fullName()}}

</div>