Use the ng new
command to start creating your Tour of Heroes application.
This tutorial:
To view the application's code, see the live example.
To set up your development environment, follow the instructions in Local Environment Setup.
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:
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.
Run ng new
followed by the application name as shown here:
ng new angular-tour-of-heroes
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:
angular-tour-of-heroes
src/app
subdirectoryThe initial application project contains a simple application that's ready to run.
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 tohttp://localhost:4200
.
You should see the application running in your browser.
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.
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. |
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.
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.
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; }
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; }
ng new
.
© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/tutorial/tour-of-heroes/toh-pt0