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.

To view the application's code, see the live example.

Set up your environment

To set up your development environment, follow the instructions in Local Environment Setup.

Create a new workspace and an initial application

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:

   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.

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.

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

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.

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:

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.

Change the application title

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

title = 'Tour of Heroes';

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

<h1>{{title}}</h1>

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

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.

/* 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;
}

Final code review

Here are the code files discussed on this page.

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

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

<h1>{{title}}</h1>

/* 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;
}

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