The controller defines the business logic required to support a view, although the term business logic isn’t helpful.
The best way of describing a controller is to explain what kinds of logic it doesn’t contain—and what’s left goes into the controller.
Logic that deals with storing or retrieving data is part of the model. Logic that deals with formatting the data to display to the user is part of the view. The controller sits between the model and the view and connects them. The controller responds to user interaction, updating the data in the model and providing the view with the data that it requires.
It doesn’t matter if this doesn’t make sense at the moment; by the end of the book you’ll be entirely comfortable with the MVC pattern and how it applies to AngularJS. I start getting into the details of the MVC pattern in Chapter 3, but you’ll see this separation of components most clearly starting in Chapter 6, when I begin building a more realistic AngularJS web app.
■ Tip Don’t worry if you are not a patterns person. The MVC pattern is largely common sense, and I apply it pretty loosely in this book. Patterns are simply tools to help developers, and you are free to adapt them to suit your needs. Once you get over the bump of the terminology associated with MVC, you can pick the bits that suit your needs and adapt MVC and AngularJS to your projects and preferred development style.
Controllers are created by calling the controller method on the Module object returned by calling angular.module, as demonstrated in the previous section. The arguments to the controller method are the name for the new controller and a function that will be invoked to define the controller functionality, as shown in Listing 2-4.
Listing 2-4. Creating a Controller in the todo.html File
<!DOCTYPE html>
<html ng-app=”todoApp”>
<head>
<title>TO DO List</title>
<link href=”bootstrap.css” rel=”stylesheet” />
<link href=”bootstrap-theme.css” rel=”stylesheet” />
<script src=”angular.js”></script>
<script>
var model = {
user: “Adam”,
items: [{ action: “Buy Flowers”, done: false },
{ action: “Get Shoes”, done: false },
{ action: “Collect Tickets”, done: true },
{ action: “Call Joe”, done: false }]
};
var todoApp = angular.module(“todoApp”, []);
todoApp.controller(“ToDoCtrl”, function ($scope) {
$scope.todo = model;
});
</script>
</head>
<body ng-controller=”ToDoCtrl”>
<div class=”page-header”>
<h1>To Do List</h1>
</div>
<div class=”panel”>
<div class=”input-group”>
<input class=”form-control” />
<span class=”input-group-btn”>
<button class=”btn btn-default”>Add</button>
</span>
</div>
<table class=”table table-striped”>
<thead>
<tr>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</body>
</html>
The convention is to name the controller <Name>Ctrl, where <Name> will help you recognize what the controller is responsible for in your application. Real applications will generally have several controllers, but I need only one for this example, which I have called ToDoCtrl.
■ Tip Naming controllers like this is just a convention, and you are free to use any name you like. The idea of following widely used conventions is that programmers who know AngularJS can quickly figure out the structure of your project.
I admit that the controller is underwhelming, but that’s because I have created the simplest controller possible. One of the main purposes of the controller is to provide views with the data they require. You won’t always want views to have access to the complete model, so you use the controller to explicitly select those portions of the data that are going to be available, known as the scope.
The argument to my controller function is called $scope—that is to say, the $ sign followed by the word scope. In an AngularJS app, variable names that start with $ represent built-in features that AngularJS provides. When you see the $ sign, it usually refers to a built-in service, which is a self-contained component that provides features to multiple controllers, but $scope is special and is used to expose data and functionality to views. I describe the scope in Chapter 13 and the built-in services in Chapter 18-25.
For this app, I want to work with the entire model in my views, so I have defined a property called todo on the $scope service object and assigned my complete model, as follows:
…
$scope.todo = model;
…
Doing this is a precursor to being able to work with the model data in views, which I demonstrate shortly. I also have to specify the region of the HTML document that the controller will be responsible for, which is done using the ng-controller attribute. Since I have only one controller—and since this is such a simple app—I have applied the ng-controller attribute to the body element, as follows:
…
<body ng-controller=”ToDoCtrl”>
…
The value of the ng-controller attribute is set to the name of the controller, which is ToDoCtrl in this example. I return to the topic of controllers in depth in Chapter 13.
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.