The static HTML in the index.html file acts as a placeholder for the basic application. The user should be able to see the list of to-do items, check off items that are complete, and create new items. In the sections that follow, I add basic Angular features to the project to bring the to-do application to life. To keep the application simple, I assume that there is only one user and that I don’t have to worry about preserving the state of the data in the application, which means that changes to the to-do list will be lost if the browser window is closed or reloaded.
Preparing the HTML File
The first step toward adding Angular to the application is to prepare the index.html file, as shown in Listing 2-3.
Listing 2-3. Preparing for Angular in the index.html File in the src folder
<!DOCTYPE html>
<html>
<head>
<title>ToDo</title>
<meta charset="utf-8" />
</head>
<body class="m-1">
<todo-app>Angular placeholder</todo-app>
</body>
</html>This listing replaces the content of the body element with a todo-app element. There is no todo-app element in the HTML specification, and the browser will ignore it when parsing the HTML file, but this element will be the entry point into the world of Angular and will be replaced with my application content. When you save the index.html file, the browser will reload the file and show the placeholder message, as shown in Picture.
Creating a Data Model
When I created the static mock-up of the application, the data was distributed across all the HTML elements. The user’s name is contained in the header, like this:
...
<h3 class="bg-primary text-white p-3">Adam's To Do List</h3>
...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>
...The next task is to pull all the data together to create a data model. Separating the data from the way it is presented to the user is one of the key ideas in the MVC pattern.
Angular applications are typically written in TypeScript. TypeScript is a superscript of JavaScript, but one of its main advantages is that it lets you write code using the latest JavaScript language specification with features that are not yet supported in all of the browsers that can run Angular applications. One of the packages that angular-CLI added to the project in the previous section was the TypeScript compiler, which is set up to generate browser-friendly JavaScript files automatically when a change to a TypeScript file is detected.
To create a data model for the application, I added a file called model.ts to the todo/src/app folder (TypeScript files have the .ts extension) and added the code shown in Listing 2-4.
Listing 2-4. The Contents of the model.ts File in the src/app folder
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 }]
};One of the most important features of TypeScript is that you can just write “normal” JavaScript code as though you were targeting the browser directly. In Listing 2-4, I used the JavaScript object literal syntax to assign a value to a global variable called model. The data model object has a user property, which provides the name of the application’s user, and an items property, which is set to an array of objects with action and done properties, each of which represents a task in the to-do list.
This is the most important aspect of using TypeScript: you don’t have to use the features it provides, and you can write entire Angular applications using just the JavaScript features that are supported by all browsers, like the code in Listing 2-4.
But part of the value of TypeScript is that it converts code that uses the latest JavaScript language features into code that will run anywhere, even in browsers that don’t support those features. Listing 2-5 shows the data model rewritten to use JavaScript features that were added in the ECMAScript 6 standard (known as ES6).
Listing 2-5. Using ES6 Features in the model.ts File in the src/app Folder
export class Model {
user;
items;
constructor() {
this.user = "Adam";
this.items = [new TodoItem("Buy Flowers", false),
new TodoItem("Get Shoes", false),
new TodoItem("Collect Tickets", false),
new TodoItem("Call Joe", false)]
}
}
export class TodoItem {
action;
done;
constructor(action, done) {
this.action = action;
this.done = done;
}
}This is still standard JavaScript code, but the class keyword was introduced in a later version of the language than most web application developers are familiar with because it is not supported by older browsers. The class keyword is used to define types that can be instantiated with the new keyword to create objects that have well-defined data and behavior.
Many of the features added in recent versions of the JavaScript language are syntactic sugar to help programmers avoid some of the most common JavaScript pitfalls, such as the unusual type system. The class keyword doesn’t change the way that JavaScript handles types; it just makes it more familiar and easier to use for programmers experienced in other languages, such as C# or Java. I like the JavaScript type system, which is dynamic and expressive, but I find working with classes more predictable and less error-prone, and they simplify working with Angular, which has been designed around the latest JavaScript features.
The export keyword relates to JavaScript modules. When using modules, each TypeScript or JavaScript file is considered to be a self-contained unit of functionality, and the export keyword is used to identify data or types that you want to use elsewhere in the application. JavaScript modules are used to manage the dependencies that arise between files in a project and avoid having to manually manage a complex set of script elements in the HTML file.
