# Create a 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.

{% hint style="info" %}
To view the application's code, see the [live example](https://angular.io/generated/live-examples/toh-pt0/stackblitz.html) / [download example](https://angular.io/generated/zips/toh-pt0/toh-pt0.zip).
{% endhint %}

## Create a new workspace and an initial application <a href="#create-a-new-workspace-and-an-initial-application" id="create-a-new-workspace-and-an-initial-application"></a>

You develop applications in the context of an Angular workspace. A *workspace* contains the files for one or more projects. 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:

   ```bash
   ng new angular-tour-of-heroes
   ```
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.
   1. choose `SCSS` as stylesheet format
   2. Don't enable `Server-Side Rendering (SSR)`

`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 <a href="#serve-the-application" id="serve-the-application"></a>

Go to the workspace directory and launch the application.

```bash
cd angular-tour-of-heroes
ng serve --open
```

{% hint style="info" %}
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`.
{% endhint %}

You should see the application running in your browser.

## Angular components <a href="#angular-components" id="angular-components"></a>

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 <a href="#make-changes-to-the-application" id="make-changes-to-the-application"></a>

Open the project in your favorite editor or IDE (-> Webstorm). 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.              |

{% hint style="warning" %}
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.
{% endhint %}

### Change the application title <a href="#change-the-application-title" id="change-the-application-title"></a>

Open the `app.component.ts` and change the `title` property value to 'Tour of Heroes'.

{% tabs %}
{% tab title="app.component.ts (class title property)" %}

```typescript
title = 'Tour of Heroes';
```

{% endtab %}
{% endtabs %}

Open `app.component.html` and delete the default template that `ng new` created. Replace it with the following line of HTML.

{% tabs %}
{% tab title="app.component.html (template)" %}

```html
<h1>{{title}}</h1>
```

{% endtab %}
{% endtabs %}

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.

### Add application styles <a href="#add-application-styles" id="add-application-styles"></a>

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.

{% tabs %}
{% tab title="src/styles.css (excerpt)" %}

```css
/* Application-wide Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[type="text"], button {
  color: #333;
  font-family: Cambria, Georgia, serif;
}
button {
  background-color: #eee;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: black;
  font-size: 1.2rem;
  padding: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
}
button:hover {
  background-color: black;
  color: white;
}
button:disabled {
  background-color: #eee;
  color: #aaa;
  cursor: auto;
}

/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}
```

{% endtab %}
{% endtabs %}

## Final code review <a href="#final-code-review" id="final-code-review"></a>

Here are the code files discussed on this page.

{% tabs %}
{% tab title="src/app/app.component.ts" %}

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'Tour of Heroes';
}
```

{% endtab %}

{% tab title="src/app/app.component.html" %}

```html
<h1>{{title}}</h1>
```

{% endtab %}

{% tab title="src/styles.css (excerpt)" %}

```css
/* Application-wide Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}
body, input[type="text"], button {
  color: #333;
  font-family: Cambria, Georgia, serif;
}
button {
  background-color: #eee;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: black;
  font-size: 1.2rem;
  padding: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
}
button:hover {
  background-color: black;
  color: white;
}
button:disabled {
  background-color: #eee;
  color: #aaa;
  cursor: auto;
}

/* everywhere else */
* {
  font-family: Arial, Helvetica, sans-serif;
}
```

{% endtab %}
{% endtabs %}

## Summary <a href="#summary" id="summary"></a>

* 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