2 Jumping right in

 

This chapter covers

  • Installing the tools and packages required for Angular development
  • Creating an Angular project
  • Using Angular features to dynamically create HTML
  • Displaying data in the HTML content
  • Responding to events
  • Styling the HTML content using the Angular Material package

The best way to get started with Angular is to dive in and create a web application. In this chapter, I show you how to set up your development environment and take you through the process of creating a basic application. In chapters 5–8, I show you how to create a more complex and realistic Angular application, but for now, a simple example will suffice to demonstrate the major components of an Angular app and set the scene for the other chapters in this part of the book.

Don’t worry if you don’t follow everything that happens in this chapter. Angular has a steep learning curve, so the purpose of this chapter is just to introduce the basic flow of Angular development and give you a sense of how things fit together. It won’t all make sense right now, but by the time you have finished reading this book, you will understand every step I take in this chapter and much more besides.

2.1 Getting ready

There is some preparation required for Angular development. In the sections that follow, I explain how to get set up and ready to create your first project. There is wide support for Angular in popular development tools, and you can pick your favorites.

2.1.1 Installing Node.js

2.1.2 Installing an editor

2.1.3 Installing the Angular development package

2.1.4 Choosing a browser

2.2 Creating an Angular project

2.2.1 Opening the project for editing

2.2.2 Starting the Angular development tools

2.3 Adding features to the application

2.3.1 Creating a data model

2.3.2 Displaying data to the user

2.3.3 Updating the component

2.4 Styling the application content

2.4.1 Applying Angular Material components

2.4.2 Defining the spacer CSS style

2.5 Displaying the list of to-do items

2.5.1 Defining additional styles

2.6 Creating a two-way data binding

2.7 Filtering completed to-do items

2.8 Adding to-do items

2.9 Finishing up

2.10 Summary