1. What Do You Need to Know?
Before reading this book, you should be familiar with the basics of web development, have an understanding of how HTML and CSS work, and, ideally, have a working knowledge of JavaScript. If you are a little hazy on some of these details, I provide refreshers for the HTML, CSS, and JavaScript I use in this book in Chapters 4 and 5. You won’t find a comprehensive reference for HTML elements and CSS properties, though. There just isn’t the space in a book about AngularJS to cover HTML in its entirety. If you want a complete reference for HTML and CSS, then I suggest another of my books, The Definitive Guide to HTML5, also published by Apress.
2. Are There Lots of Examples?
There are loads of examples. The best way to learn AngularJS is by example, and I have packed as many of them as I can into this book. To maximize the number of examples in this book, I have adopted a simple convention to avoid listing the contents of files over and over again. The first time I use a file in a chapter, I’ll list the complete contents, just as I have in Listing 1-1.
Listing 1-1. A Complete Example Document
<!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>
This listing is taken from Chapter 2. Don’t worry about what it does; just be aware that the first time I use a file in each chapter there will be complete listing, similar to the one shown in Listing 1-1. For the second and subsequent examples, I just show you the elements that change, to create a partial listing. You can spot a partial listing because it starts and ends with ellipsis (…), as shown in Listing 1-2.
Listing 1-2. A Partial Listing
…
<body ng-controller=”ToDoCtrl”>
<div class=”page-header”>
<hl>
{{todo.user}}’s To Do List
<span class=”label”>{{todo.items.length}}</span>
</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 ng-repeat=”item in todo.items”>
<td>{{item.action}}</td>
<td>{{item.done}}</td>
</tr>
</tbody>
</table>
</div>
</body>
…
This is a subsequent listing from Chapter 2. You can see that just the body element, and its content, is shown and that I have highlighted a number of statements. This is how I draw your attention to the part of the example that shows the feature or technique I am describing. In a partial listing like this, only those parts shown have changed from the full listing earlier in the chapter. In some cases, I need to make changes to different parts of the same file, in which case I simply omit some elements or statements for brevity, as shown in Listing 1-3.
Listing 1-3. Omitting Elements for Brevity
<!DOCTYPE html>
<html ng-app=”todoApp”>
<head>
<title>TO DO List</title>
<link href=”bootstrap.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”>
<!– …elements omitted for brevity… –>
<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>
This convention lets me pack in more examples, but it does mean it can be hard to locate a specific technique.
To this end, all of the chapters in which I describe AngularJS features in Parts 2 and 3 begin with a summary table that describes the techniques contained in the chapter and the listings that demonstrate how they are used.
3. Where Can You Get the Example Code?
You can download all the examples for all the chapters in this book from www.apress.com. The download is available without charge and includes all of the supporting resources that are required to re-create the examples without having to type them in. You don’t have to download the code, but it is the easiest way of experimenting with the examples and cutting and pasting it into your own projects.
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.