AngularJS supports the Model-View-Controller (MVC) pattern, which I describe in Chapter 3. In short, following the MVC pattern requires you to break up the application into three distinct areas: the data in the application (the model), the logic that operates on that data (the controllers), and the logic that displays the data (the views).
The data in my to-do application is currently distributed across the HTML elements. The user’s name is contained in the header, like this:
…
<h1>Adam’s To Do List</h1>
…
and the details of the to-do items are contained within td elements in the table, like this:
…
<tr><td>Buy Flowers</td><td>No</td></tr>
…
My first task is to pull all of the data together and separate it from the HTML elements in order to create a model. Separating the data from the way that it is presented to the user is one of the key ideas in the MVC pattern, as I explain in Chapter 3. Since AngularJS applications exist in the browser, I need to define my data model using JavaScript within a script element, as shown in Listing 2-3.
Listing2-3. Creating a Data Model 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 Doe”, done: false }]
);
var todoApp = angular.module(“todoApp”, []);
</script>
</head>
<body>
<div class=”page-header”>
<hl>To Do List</hl>
</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>
■ Tip I am simplifying here. The model can also contain the logic required to create, load, store, and modify data objects. In an AngularJS app, this logic is often at the server and is accessed by a web server. See Chapter 3 for further details.
I have defined a JavaScript object called model with properties that correspond to the data that was previously distributed among the HTML elements. The user property defines the name of the user, and the items property defines an array of objects that describe my to-do items.
You wouldn’t usually define a model without also defining the other parts of the MVC pattern at the same time, but I want to demonstrate how I build up my simple AngularJS application. You can see the effect of this change in Figure 2-2.
■ Tip In any AngularJS development project, there is a period where you have to define the main parts of the MVC pattern and plumb them together. During this period, it can feel like you have taken a step backward, especially if you are working from a static mock-up like I am in this chapter. This period of initial investment will ultimately pay off, I promise. You will see a larger example of this in Chapter 6 when I start to build a more complex and realistic AngularJS application; there is a lot of initial setup and configuration required, but then the features start to quickly snap into place.
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.