angular/aio/content/tutorial/first-app/index.md

Introduction to Angular tutorial - the First Angular app

This topic is a work in progress

This topic is a rough draft. Many sections are incomplete and some or all content might change before its final draft.

This tutorial consists of lessons that introduce the Angular concepts you need to know to start coding in Angular.

If you're just starting out with Angular, completing the lessons in sequence provides the best learning experience, because each lesson builds on the previous lessons. After you're familiar with Angular, you can come back into any lesson for a refresher.

If you're more experienced, the lessons in this tutorial can be completed individually. You can do as many or as few as you would like and you can do them in any order.

Before you start

For the best experience with this tutorial, review these requirements to make sure you have what you need to be successful.

Your experience

The lessons in this tutorial assume that you have done the following.

1. Created an HTML web page by editing the HTML directly. This tutorial makes references to HTML elements and the Document Object Model (DOM). If these terms are not familiar, review HTML programming before you start this tutorial.
2. Programmed web site content in JavaScript. This tutorial has many examples of TypeScript programming, which is based on JavaScript. TypeScript-specific feature are explained, but familiarity with JavaScript programming is necessary to understand the lessons in this tutorial.
3. Read Cascading Style Sheet (CSS) content and understand how selectors are used. This tutorial does not require any CSS coding, but if these terms are not familiar, review CSS and selectors before you start this tutorial.
4. Used command-line instructions to perform tasks on your computer. Angular uses the Angular CLI to perform many tasks. This tutorial provides the commands to use and assumes that you know how to open the command line tool or terminal interface in which to use them. If you aren't sure how to use a command line tool or terminal interface, review that before starting this tutorial.

Your equipment

For the best learning experience, do the lessons on your own computer that's running Windows or macOS and connected to the internet. You can also work through these lessons on the web without installing any software on your computer, by using the StackBlitz examples linked from each lesson.

Working on your own computer has the advantage of being able to save your work locally for future reference. If you're working on your own computer, the procedure that follows get your computer ready for the tutorial.

Working in StackBlitz allows you to work through the lessons without loading any software on your own computer. You can save your work in StackBlitz by using your GitHub account. To save your StackBlitz lessons, make sure you can access your GitHub account before you start.

Conceptual preview of your first Angular app

The lessons in this tutorial create a simple Angular app that lists houses for rent and show the details of individual houses. This app uses features that are common to many Angular apps.

TODO: add more details and images of the app.

Lesson steps

If you are using your own computer for this tutorial, you must install the required software. If you have already installed some of the required software, you must verify that it is the correct version.

Perform these steps in a command-line tool on the computer you want to use for this tutorial.

IMPORTANT: If you plan to use StackBlitz to do the lessons, you can proceed to the first lesson. You don't need to install any software.

Step 1 - Identify the version of node.js that Angular requires

TODO: describe goal of this step in a sentence. 

In the Terminal pane of your IDE:

1. In your project directory, navigate to the first-app directory.

2. TODO: describe how to do this in numbered actions.

Step 2 - Install the correct value of node.js for Angular

TODO: describe goal of this step in a sentence. 

In the Terminal pane of your IDE:

1. In your project directory, navigate to the first-app directory.

2. TODO: describe how to do this in numbered actions.

Step 3 - Install the latest version of Angular

TODO: describe goal of this step in a sentence. 

In the Terminal pane of your IDE:

1. In your project directory, navigate to the first-app directory.

2. TODO: describe how to do this in numbered actions.

Step 4 - Install integrated development environment (IDE)

TODO: describe goal of this step in a sentence. 

In the Terminal pane of your IDE:

1. In your project directory, navigate to the first-app directory.

2. TODO: describe how to do this in numbered actions.

Lesson review

In this lesson, you learned about the app that you build in this tutorial and prepared your local computer to develop Angular apps.

Next steps

• First Angular app lesson 1 - Hello world

More information

For more information about the topics covered in this lesson, visit:

• TODO: Links to related topic.

• TODO: Links to related topic.

• TODO: Links to related topic.