The role of controllers in Angular is to expose data to our view via $scope,
and to add functions to $scope that contain business logic to enhance view
behavior. Presentation logic should remain within views and directives.
Let's start by creating an angular application with the following code:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Controllers</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-app="app">
<h1>Controllers</h1>
</div>
</body>
</html>
The value given to the ng-app directive tells angular what module to look for
when angular boots up, in this case our module name is app.
Let's create our app module in app.js
angular.module('app', []);
The first parameter of angular.module defines the name of the module. The
second parameter is an array that declares the module dependencies that our
module uses. Our app currently doesn't depend on any other modules.
Now, create our controller with the following code in app.js:
angular.module('app', []);
angular.module('app').controller('MainCtrl', function (){
});
We register a controller with our angular module using the controller function
provided by modules. Then, the first parameter is a string that specifies the
controller name, and the second parameter is the function that represents our
controller. In order to pass data to our view, we'll need to inject $scope
and add some data to it.
Inject $scope to our controller by specifying it as a parameter
angular.module('app').controller('MainCtrl', function ($scope){
});
Set $scope.message with an object:
angular.module('app').controller('MainCtrl', function ($scope){
$scope.message = 'hello';
});
Now that we have a controller ready to use, let's create a div with a paragraph that contains our message
<div ng-app="app">
<h1>Controllers</h1>
<div ng-controller="MainCtrl">
<p>{{ message }}</p>
</div>
</div>
We can see that we can simply access variables initialized on $scope in our
controller by using bindings. Now, let's build out some functionality to let us
manipulate the data.
Create a updateMessage function on $scope that updates $scope.message,
given a message
angular.module('app').controller('MainCtrl', function ($scope){
$scope.message = 'hello';
$scope.updateMessage = function(message){
$scope.message = message;
};
});
Create a form that contains an input and uses the updateMessage function we
created.
<div ng-controller="MainCtrl">
<p>{{ message }}</p>
<form ng-submit="updateMessage(newMessage)">
<input type="text" ng-model="newMessage">
<button type="submit">Update Message</button>
</form>
</div>
The ng-submit directive that we used in our form tag contains an Angular expression that gets executed when the form gets submitted. When we type a message into our form and hit enter or the Update Mesage button, we can see the original message above the form get updated with the text from the input.
Controller As Syntax
While everything we've created in this example so far works fine, a
possible issue we can come accross as our application grows is when we start
nesting controllers. Since each controller gets assigned their own scope,
controllers that are nested can have trouble accessing variables from the
parent scope. Specifically when data is being read from a child controller,
where the value is directly assigned to the parent $scope and not namespaced
within an object (accessing $scope.data.message will work from a child
controller but accessing $scope.message can break). The rule of thumb is to
always have a dot when referencing variables from controllers in your angular
expressions. We can enforce this by using the "controller as" syntax. This
makes it so that your controllers can be directly referenced within the view.
The "controller as" syntax is generally the preferred syntax for controllers.
Read this post on the "controller as" syntax
Now let's update our code to use the "controller as". Since our scope becomes
the this keyword in our controller, we'll need to create a reference to
this so that we don't lose context of our controller when we create/call
functions within our controller.
Read the MDN reference
for the this keyword in javascript
Create a reference to this in our controller.
angular.module('app').controller('MainCtrl', function ($scope){
var self = this;
Remove $scope from our controller dependency, and use self instead of
$scope.
angular.module('app').controller('MainCtrl', function (){
var self = this;
self.message = 'hello';
self.changeMessage = function(message){
self.message = message;
};
});
Now, let's update our view to use the "controller as" syntax.
<div ng-controller="MainCtrl as main">
<p>{{ main.message }}</p>
<form ng-submit="main.changeMessage(main.newMessage)">
<input type="text" ng-model="main.newMessage">
<button type="submit">Change Message</button>
</form>
</div>
Now all of our variables in our Angular expressions contain a dot, and we're
able to directly reference our controllers so that when we have nested or
multiple nested controllers, we can access variables directly instead of using
$parent.
There's more to learn!