https://github.com/angular/angular
Tip revision: 6a9b1e11c2f2b3924f088aca2a941b17aca3f335 authored by Andrew Kushnir on 09 November 2022, 21:35:20 UTC
release: cut the v15.0.0-rc.3 release
release: cut the v15.0.0-rc.3 release
Tip revision: 6a9b1e1
toh-pt0.md
# Create a new project
Use the `ng new` command to start creating your **Tour of Heroes** application.
This tutorial:
1. Sets up your environment.
2. Creates a new workspace and initial application project.
3. Serves the application.
4. Makes changes to the new application.
<div class="alert is-helpful">
To view the application's code, see the <live-example></live-example>.
</div>
## Set up your environment
To set up your development environment, follow the instructions in [Local Environment Setup](guide/setup-local "Setting up for Local Development").
## Create a new workspace and an initial application
You develop applications in the context of an Angular [workspace](guide/glossary#workspace).
A *workspace* contains the files for one or more [projects](guide/glossary#project).
A *project* is the set of files that make up an application or a library.
To create a new workspace and an initial project:
1. Ensure that you aren't already in an Angular workspace directory.
For example, if you're in the Getting Started workspace from an earlier exercise, navigate to its parent.
2. Run `ng new` followed by the application name as shown here:
<code-example format="shell" language="shell">
ng new angular-tour-of-heroes
</code-example>
3. `ng new` prompts you for information about features to include in the initial project.
Accept the defaults by pressing the Enter or Return key.
`ng new` installs the necessary `npm` packages and other dependencies that Angular requires.
This can take a few minutes.
`ng new` also creates the following workspace and starter project files:
* A new workspace, with a root directory named `angular-tour-of-heroes`
* An initial skeleton application project in the `src/app` subdirectory
* Related configuration files
The initial application project contains a simple application that's ready to run.
## Serve the application
Go to the workspace directory and launch the application.
<code-example format="shell" language="shell">
cd angular-tour-of-heroes
ng serve --open
</code-example>
<div class="alert is-helpful">
The `ng serve` command:
* Builds the application
* Starts the development server
* Watches the source files
* Rebuilds the application as you make changes
The `--open` flag opens a browser to `http://localhost:4200`.
</div>
You should see the application running in your browser.
## Angular components
The page you see is the *application shell*.
The shell is controlled by an Angular **component** named `AppComponent`.
*Components* are the fundamental building blocks of Angular applications.
They display data on the screen, listen for user input, and take action based on that input.
## Make changes to the application
Open the project in your favorite editor or IDE. Navigate to the `src/app` directory to edit the starter application.
In the IDE, locate these files, which make up the `AppComponent` that you just created:
| Files | Details |
|:--- |:--- |
| `app.component.ts` | The component class code, written in TypeScript. |
| `app.component.html` | The component template, written in HTML. |
| `app.component.css` | The component's private CSS styles. |
<div class="alert is-important">
When you ran `ng new`, Angular created test specifications for your new application.
Unfortunately, making these changes breaks your newly created specifications.
That won't be a problem because Angular testing is outside the scope of this tutorial and won't be used.
To learn more about testing with Angular, see [Testing](guide/testing).
</div>
### Change the application title
Open the `app.component.ts` and change the `title` property value to 'Tour of Heroes'.
<code-example header="app.component.ts (class title property)" path="toh-pt0/src/app/app.component.ts" region="set-title"></code-example>
Open `app.component.html` and delete the default template that `ng new` created.
Replace it with the following line of HTML.
<code-example header="app.component.html (template)" path="toh-pt0/src/app/app.component.html"></code-example>
The double curly braces are Angular's *interpolation binding* syntax.
This interpolation binding presents the component's `title` property value inside the HTML header tag.
The browser refreshes and displays the new application title.
<a id="app-wide-styles"></a>
### Add application styles
Most apps strive for a consistent look across the application.
`ng new` created an empty `styles.css` for this purpose.
Put your application-wide styles there.
Open `src/styles.css` and add the code below to the file.
<code-example header="src/styles.css (excerpt)" path="toh-pt0/src/styles.1.css"></code-example>
## Final code review
Here are the code files discussed on this page.
<code-tabs>
<code-pane header="src/app/app.component.ts" path="toh-pt0/src/app/app.component.ts"></code-pane>
<code-pane header="src/app/app.component.html" path="toh-pt0/src/app/app.component.html"></code-pane>
<code-pane header="src/styles.css (excerpt)" path="toh-pt0/src/styles.1.css"></code-pane>
</code-tabs>
## Summary
* You created the initial application structure using `ng new`.
* You learned that Angular components display data
* You used the double curly braces of interpolation to display the application title
@reviewed 2022-02-28