Installing Node.js

Many of the tools used for Angular development rely on Node.js—also known as Node—which was created in 2009 as a simple and efficient runtime for server-side applications written in JavaScript. Node.js is based on the JavaScript engine used in the Chrome browser and provides an API for executing JavaScript code outside of the browser environment.

Node.js has enjoyed success as an application server, but for this book, it is interesting because it has provided the foundation for a new generation of cross-platform development and build tools. Some smart design decisions by the Node.js team and the cross-platform support provided by the Chrome JavaScript runtime have created an opportunity that has been seized upon by enthusiastic tool writers. In short, Node.js has become essential for web application development.

It is important that you download the same version of Node.js that I use throughout this book. Although Node.js is relatively stable, there are still breaking API changes from time to time that may stop the examples I include in the chapters from working.

The version I have used is 8.11.3, which is the current Long-Term Support release at the time of writing. There may be a later version available by the time you read this, but you should stick to the 8.11.3 release for the examples in this book. A complete set of 8.11.3 releases, with installers for Windows and macOS and binary packages for other platforms, is available at https://nodejs.org/dist/v8.11.3 .

Installing the angular-cli Package

Installing Git

The Git revision control tool is required to manage some of the packages required for Angular development. If you are using Windows or macOS, then download and run the installer from https://git-scm.com/downloads . (On macOS, you may have to change your security settings to open the installer, which has not been signed by the developers.)

This command prints out the version of the Git package that has been installed. At the time of writing, the latest version of Git for Windows and Linux is 2.17, and the latest version of Git for macOS is 2.16.3.

Installing an Editor

When choosing an editor, one of the most important considerations is the ability to filter the content of the project so that you can focus on a subset of the files. There can be a lot of files in an Angular project, and many have similar names, so being able to find and edit the right file is essential. Editors make this possible in different ways, either by presenting a list of the files that are open for editing or by providing the ability to exclude files with specific extensions.

Installing a Browser

The final choice to make is the browser that you will use to check your work during development. All the current-generation browsers have good developer support and work well with Angular. I have used Google Chrome throughout this book, and this is the browser I recommend you use as well.

Creating the Project

The ng command is provided by the angular-cli package, and ng new sets up a new project. The installation process creates a folder called todo that contains all of the configuration files that are needed to start Angular development, some placeholder files to start development, and the NPM packages required for developing, running, and deploying Angular applications. (There are a large number of NPM packages, which means that project creation can take a while.)

Adding the Bootstrap CSS Package

As I explain in Chapter 11, the angular.json file is used to configure the project tools, and the statement shown in the listing incorporates the Bootstrap CSS file into the project so that it will be included in the content sent to the browser.

Starting the Development Tools

Don’t worry if you see slightly different output, just as long as you see the “compiled successfully” message once the preparations are complete.

The development tools in the project include an HTTP server. Once the build process is completed, a new browser window will open, and you will see the content shown in Figure 2-1, which shows the placeholder content added to the project when it was created.

Editing the HTML File

The Angular development tools include a feature that automatically updates the browser when there is a change in the project. As soon as you save the index.html file, the server will detect the change and update the application, reflecting the new content, as shown in Figure 2-2.

The HTML elements in the index.html file show how the simple Angular application I create in this chapter will look. The key elements are a banner with the user’s name, an input element and an Add button that add a new to-do item to the list, and a table that contains all the to-do items and indicates whether they have been completed.

This h3 element has been assigned to three classes. The bg-primary class sets the background color of the element to the primary color of the Bootstrap theme. There are other theme colors available, including bg-secondary, bg-info, and bg-danger. The p-1 class adds a fixed amount of padding to all edges of the element, ensuring that the text has some space around it. The text-white class sets the text color to white, which increases the contrast with the background color. You will see HTML elements added to these classes and others throughout this book as I apply Bootstrap, and I provide a brief overview of the classes that I use most in Chapter 4.

In the next section, I’ll remove the HTML from the file, cut it up into smaller pieces, and use it to create a simple Angular application.

Preparing the HTML File

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 Figure 2-3.

Creating a Data Model

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, as I explain in Chapter 3.

Angular applications are typically written in TypeScript. I introduce TypeScript in Chapter 6 and explain how it works and why it is useful. 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.

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.

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. See Chapter 7 for details of how modules work.

Preparing the Template

I’ll add more elements to this file shortly, but a single h3 element is enough to get started. Including a data value in a template is done using double braces—{{ and }}—and Angular evaluates whatever you put between the double braces to get the value to display.

The {{ and }} characters are an example of a data binding, which means they create a relationship between the template and a data value. Data bindings are an important Angular feature, and you will see more of them in this chapter as I add features to the example application (and I describe them in detail in Part 2 of this book). In this case, the data binding tells Angular to invoke a function called getName and use the result as the contents of the h3 element. The getName function doesn’t exist anywhere in the application at the moment, but I’ll create it in the next section.

Preparing the Component

An Angular component is responsible for managing a template and providing it with the data and logic it needs. If that seems like a broad statement, it is because components are the part of an Angular application that does most of the heavy lifting. As a consequence, they can be used for all sorts of tasks.

This is still JavaScript, but it relies on features that you may not have encountered before but that underpin Angular development. The code in the listing can be broken into three main sections, as described in the following sections.

Putting the Application Together

I have the three key pieces of functionality required to build a simple Angular application: a model, a template, and a component. When you saved the change to the app.component.ts file, there was enough functionality in place to bring the three pieces together and display the output shown in Figure 2-4.

One advantage of using angular-cli to create a project is that you don’t have to worry about creating the basic files required by an Angular application. The drawback is that skipping over these files means you will miss out on some important details that are worth exploring.

Angular applications require a module. Through an unfortunate naming choice, there are two types of module used in Angular development. A JavaScript module is a file that contains JavaScript functionality that is used through the import keyword, which I describe in Chapter 6. The other type of module is an Angular module, which is used to describe an application or a group of related features. And just to complicate matters, every application has a root module, which is the Angular module that provides Angular with the information that it needs to start the application.

The purpose of the Angular module is to provide configuration information through the properties defined by the @NgModule decorator. I explain how Angular modules work in detail in Chapter 21, but for the moment, it is enough to know that the decorator’s imports property tells Angular that the application depends on features required to run an application in the browser and that the declarations and bootstrap properties tell Angular about the components in the application and which one should be used to start the application (there is only one component in this simple example application, which is why it is the only value for both properties).

Although this book focuses on applications that run in a web browser, Angular is intended to work in a range of environments. The code statements in the bootstrap file select the platform that will be used and load the root module, which is the entry point into the application.

The browser executed the code in the bootstrap file, which fired up Angular, which in turn processed the HTML document and discovered the todo-app element. The selector property used to define the component matches the todo-app element, which allowed Angular to remove the placeholder content and replace it with the component’s template, which was loaded automatically from the app.component.html file. The template was parsed; the {{ and }} data binding was discovered, and the expression it contains was evaluated, calling the getName method and displaying the result shown in the figure. It may not be that impressive, but it is a good start, and it provides a foundation on which to add more features.

Adding the To-Do Table

This expression tells Angular to treat the tr element to which it has been applied as a template that should be repeated for every object returned by the component’s getTodoItems method. The let item part of the expression specifies that each object should be assigned to a variable called item so that it can be referred to within the template.

The result is that the tr element and its contents will be duplicated and inserted into the HTML document for each object returned by the getTodoItems method; for each iteration, the current to-do object can be accessed through the variable called item, and the position of the object in the array can be accessed through the variable called i.

These bindings refer to the variables that are created by the *ngFor expression. Bindings are not just used to refer to property and method names; they can also be used to perform simple JavaScript operations. You can see an example of this in the first binding, where I sum the i variable and 1.

The [ngSwitch] expression is a conditional statement that is used to insert different sets of elements into the document based on a specified value, which is the item.done property in this case. Nested within the td element are two span elements that have been annotated with *ngSwitchCase and *ngSwitchDefault and that are equivalent to the case and default keywords of a regular JavaScript switch block. I describe ngSwitch in detail in Chapter 13 (and what the square brackets mean in Chapter 12), but the result is that the first span element is added to the document when the value of the item.done property is true, and the second span element is added to the document when item.done is false. The result is that the true/false value of the item.done property is transformed into span elements containing either Yes or No. When you save the changes to the template, the browser will reload, and the table of to-do items will be displayed, as shown in Figure 2-5.

If you use the browser’s F12 developer tools, you will be able to see the HTML content that the template has generated. (You can’t do this looking at the page source, which just shows the HTML sent by the server and not the changes made by Angular using the DOM API.)

Creating a Two-Way Data Binding

The ngModel template expression creates a two-way binding between a data value (the item.done property in this case) and a form element. When you save the changes to the template, you will see a new column that contains checkboxes appear in the table. The initial value of the checkbox is set using the item.done property, just like a regular one-way binding, but when the user toggles the checkbox, Angular responds by updating the specified model property.

To demonstrate how this works, I have left the column that contains the Yes/No display of the done property value generated using the ngSwitch expression in the template. When you toggle a checkbox, the corresponding Yes/No value changes as well, as illustrated in Figure 2-6.

This reveals an important Angular feature: the data model is live. This means that data bindings—even one-way data bindings—are updated when the data model is changed. This simplifies web application development because it means you don’t have to worry about ensuring that you display updates when the application state changes.

Filtering To-Do Items

The checkboxes allow the data model to be updated, and the next step is to remove to-do items once they have been marked as done. Listing 2-14 changes the component’s getTodoItems method so that it filters out any items that have been completed.

import { Component } from "@angular/core";

import { Model } from "./model";

@Component({

    selector: "todo-app",

    templateUrl: "app.component.html"

})

export class AppComponent {

    model = new Model();

    getName() {

        return this.model.user;

    }

    getTodoItems() {

        return this.model.items.filter(item => !item.done);

    }

}

Listing 2-14

Filtering To-Do Items in the app.component.ts File in the src/app Folder

This is an example of a lambda function, also known as a fat arrow function, which is a more concise way of expressing a standard JavaScript function. The arrow in the lambda expressions is read as “goes to” such as “item goes to not item.done.” Lambda expressions are a recent addition to the JavaScript language specification, and they provide an alternative to the conventional way of using functions as arguments like this:

...

return this.model.items.filter(function (item) { return !item.done });

...

Whichever way you choose to define the expression passed to the filter method, the result is that only incomplete to-do items are displayed. Since the data model is live and changes are reflected in data bindings immediately, checking the checkbox for an item removes it from view, as shown in Figure 2-7.

Adding To-Do Items

This is an example of an event binding, and it tells Angular to invoke a component method called addItem, using the value property of the input element as the method argument. Listing 2-16 implements the addItem method in the component.

The import keyword can be used to import multiple classes from a module, and one of the import statements in the listing has been updated so that the TodoItem class can be used in the component. Within the component class, the addItem method receives the text sent by the event binding in the template and uses it to create a new TodoItem object and add it to the data model. The result of these changes is that you can create new to-do items by entering text in the input element and clicking the Add button, as shown in Figure 2-8.