2 Building your first Angular app

This chapter covers

Angular components and how they form a basis for your app
Defining a number of types of components, using decorators
Learning how services can be used to share data across your app
Setting up routing to display different pages

You’re going to build an entire Angular app in this chapter, starting from scratch, while learning about the primary concepts of Angular. You’ll see some TypeScript features in action, as well as new and upcoming features of JavaScript.

This project will remain focused and simple, yet still be representative of many of the features you’ll use in a typical app. The app you’ll create is a stock tracking app, with data coming from Yahoo! Finance. It will be able to fetch current stock prices, add or remove stocks from a list, and adapt a visual display based on the current day’s gains or losses.

In this chapter, we’ll build this app piece by piece. We’ll focus on getting through the example application with enough detail to understand the various pieces and complexity in this chapter:

2.1 Previewing the chapter project

2.2 Setting up the project

2.3 The basic app scaffolding

2.4 How Angular renders the base application

2 Building your first Angular app

This chapter covers

2.1 Previewing the chapter project

2.2 Setting up the project

2.3 The basic app scaffolding

2.4 How Angular renders the base application

2.4.1 App component

2.4.2 App module

2.4.3 Bootstrapping the app

2.5 Building services

2.6 Creating your first component

2.7 Components that use components and services

2.8 Components with forms and events

2.9 Application routing

Summary