In Chapter 1, I showed you how to create and test the development environment that I use in this book. If you want to follow the examples, now is the time to get everything up and running.
I am going to start with a static HTML mock-up of my goal in this chapter, which is a simple to-do application.
I created a new HTML file called todo.html in the angularjs folder. You can see the contents of the new file in Listing 2-1.
Listing2-1. The Initial Contents of the todo.html File
<!DOCTYPE html>
<html data-ng-app>
<head>
<title>TO DO List</title>
<link href=”bootstrap.css” rel=”stylesheet” />
<link href=”bootstrap-theme.css” rel=”stylesheet” />
</head>
<body>
<div class=”page-header”>
<h1>Adam’s 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>
<tr><td>Buy Flowers</td><td>No</td></tr>
<tr><td>Get Shoes</td><td>No</td></tr>
<tr><td>Collect Tickets</td><td>Yes</td></tr>
<tr><td>Call Joe</td><td>No</td></tr>
</tbody>
</table>
</div>
</body>
</html>
■ Tip From now on, unless I tell you otherwise, add all files to the angularjs folder that you created in the previous chapter. You don’t have to re-create the examples by hand. Instead, you can download all of the examples without charge from Apress.com. The examples are complete and are organized by chapter, containing all of the files that I use to build and test the examples.
This file doesn’t use AngularJS; in fact, there isn’t even a script element to import the angular.js file at the moment. I’ll add the JavaScript file and start applying AngularJS features shortly, but for now, the todo.html file contains static HTML elements that provide a skeletal mock-up of a to-do application: a header at the top of the page and a table that contains the to-do items. To see the effect I have created, use the browser to navigate to the todo.html file, as shown in Figure 2-1.
■ Note To keep the example in this chapter simple, I am going to do everything within the todo.html file. There is usually a carefully chosen structure for the files in an AngularJS application, but I won’t be doing anything complicated enough to make that an issue; in Chapter 6, I start the process of building a more complex AngularJS application, and I’ll talk about file structure in that context.
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.