1.2 Angular - Create A New Project

05/07/2023, 15:57 Angular - Create a new project
Skip to main content
mode_edit
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 / download

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.
https://angular.io/tutorial/tour-of-heroes/toh-pt0 1/7
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:
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.
Change the application title

Open the app.component.ts and change the title property value to
'Tour of Heroes'.
app.component.ts (class title property)
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.
app.component.html (template)
<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.
src/styles.css (excerpt)
/* Application-wide Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
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 */
* {
}
Final code review

Here are the code files discussed on this page.
src/app/app.component.ts src/app/app.component.html src/styles
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Tour of Heroes';
}
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
Last reviewed on Mon Feb 28 2022

1.2 Angular - Create A New Project

Uploaded by

Copyright:

Available Formats

1.2 Angular - Create A New Project

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

1.2 Angular - Create A New Project

Uploaded by

Copyright:

Available Formats

05/07/2023, 15:57 Angular - Create a new project

Skip to main content

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 / download

Set up your environment

Create a new workspace and an

To create a new workspace and an initial project:

exercise, navigate to its parent.

2. Run ng new followed by the application name as shown here:

3. ng new prompts you for information about features to include in

ng new installs the necessary npm packages and other dependencies

A new workspace, with a root directory named angular-tour-of-

The initial application project contains a simple application that's ready to

Serve the application

Skip to main content

Builds the application

The --open flag opens a browser to

You should see the application running in your browser.

Angular component named AppComponent .

Components are the fundamental building blocks of Angular applications.

based on that input.

Make changes to the application

make up the AppComponent that you just created:

app.component.ts The component class code, written in

app.component.html The component template, written in

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

To learn more about testing with Angular, see Testing.

Change the application title

app.component.ts (class title property)

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.

The browser refreshes and displays the new application title.

Add application styles

created an empty styles.css for this purpose. Put your application-wide

Open src/styles.css and add the code below to the file.

Final code review

src/app/app.component.ts src/app/app.component.html src/styles

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

You learned that Angular components display data

Last reviewed on Mon Feb 28 2022

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.