Controllers

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.