Creating an AngularJS Controller

Creating an AngularJS Controller

October 1, 2015

What the heck is a friggin' Controller! I come from a background in design and CSS, but I've been getting more and more fascinated with Javascript and Angular in the last few years and the definition for the word "controller" has always eluded me no matter how many times I've heard it explained. My goal is to figure it out in this article.

Controllers control the flow of data in the application. A controller is simply a JavaScript object. Usually an application is broken down in to several controllers that oversee different parts of the application. The controller is responsible for putting your data inside the part of the application that it controls. We can’t talk about controllers without also mentioning $scope and views. The $scope is the glue between the view and the controller. The view can be thought of as the html or what you see in the browser.

This will make more sense as we go (hopefully).

Creating a controller

//app.js
var brewitivity = angular.module('brewitivity', []);
brewitivity.controller('BrewController');

I’ve created the Angular module ‘brewitivity’ and stored it in a variable of the same name just to get things going. More importantly just underneath that, I’ve defined the controller and called it “BrewController”. The convention for naming controllers is to use PascalCase or UpperCamelCase, which is why the “B” is also capitalized.

//app.js
var brewitivity = angular.module('brewitivity', []);
brewitivity.controller('BrewController', function($scope){
  //controls to go here...
});

So taking baby steps here, we’ve passed the controller method a callback function and then put $scope as a parameter of that function. The $scope object is the glue between the controller and the view, so we’ll need that.
Scope, the glue between the controller and view

Scope

//app.js
var brewitivity = angular.module('brewitivity', []);
brewitivity.controller('BrewController', function($scope){
  $scope.coffee = "Light Roast";
});

We’ve created a property on the scope called ‘coffee’ and gave it our preferred coffee roast. So the controller has used the $scope object to connect to some data. Now we can have $scope pass this data in to the view.

<!--index.html-->
<div ng-controller="BrewController">
  <p>{{coffee}}</p>
</div>

In order for the controller to control anything, we have to tell it to control some part of the HTML (or view) by adding the ng-controller attribute to an HTML element, in our case the div. The div and everything inside it will be controlled by the “BrewController”.

Next, we have {{coffee}} which should produce “Light Roast”. Here’s the codepen in action:

<code>&lt;div ng-app=&quot;brewitivity&quot;&gt;
  &lt;div ng-controller=&quot;brewController&quot;&gt;
    &lt;p&gt;Preferred coffee: {{coffee}}&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code>

See the Pen Creating an AngularJS Controller by Rich Finelli (@richfinelli) on CodePen.

Taking it a little bit further

Let’s take it a step further and create a few more fields on the $scope.

var brewitivity = angular.module('brewitivity', []);
brewitivity.controller('BrewController', function($scope){
  $scope.coffee = {
    roast: "Light Roast",
    brand: "Quick Check",
    size: "Small",
    fixings: "Cream and Sugar"
  }
});

So now we still have ‘coffee’ as an object on the $scope object and using the object literal notation, have created several new properties: roast, brand, size, and fixings.

  <div ng-controller="BrewController">
    <p>Preferred coffee: {{coffee.roast}}</p>
    <p>Brand: {{coffee.brand}}</p>
    <p>Size: {{coffee.size}}</p>
    <p>Fixings: {{coffee.fixings}}</p>
  </div>

And in the HTML, I’m using the curly brace syntax with {{coffee.property}} to bring in the different properties of the coffee object. Here’s everything just in a codepen.

<code>var brewitivity = angular.module(&#39;brewitivity&#39;, []);
brewitivity.controller(&#39;brewController&#39;, function($scope){
  $scope.coffee = {
    roast: &quot;Light Roast&quot;,
    brand: &quot;Quick Check&quot;,
    size: &quot;Small&quot;,
    fixings: &quot;Cream and Sugar&quot;
  }
});</code>

See the Pen Creating an AngularJS Controller (2of2) by Rich Finelli (@richfinelli) on CodePen.

Conclusion

So now it’s totally obvious as to what a controller is. It’s still a little vague, you say? Ehh, I guess that makes two of us. A controller is just a set of Javascript functions and data bound to a scope.

We use the ng-controller directive in our HTML to specify what elements the controller will be in charge of. The controller will be the HQ for the element you put the ng-controller directive on and all child elements of it. Controllers should contain business logic for the view or in our example it really just holds some data. As you become more familiar with Angular and its conventions and best practices you’ll be putting less in the controller and moving those functions out in to services, filters, and directives.You should avoid using your controller to manipulate the DOM as directives are much better for this. I’ll touch on directives in an upcoming post. That’s it for controllers, in the next part of my Angular Beginner series we’ll look at ng-repeat.

Mastering CSS: Book by Rich Finelli
Mastering CSS, the Book! Flexbox, Layout, Animations, Responsive, Retina, and more!
Mastering CSS, 2nd Edition, video course by Rich Finelli
Mastering CSS, Second Edition: 47 videos on how to make websites like a boss! Flexbox, Animations, Responsive, Retina, and more!
Back to top