asi 116 gu Cnt news
Skip to main content
hived documentation for Angular v17. Please visit angular.dev is page for
Create a new project
Use the ng_new command to start creating your Tour of Heroes application.
Please note: Starting in Angular version 17 new projects will be standalone by default @. To create a
Project with NgModute use the option ng new --no-standalone
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.
hipe:ivi argusionseranourt rastSkip to main content
lication’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 projects the set of files that make up an application ora library
To create a new workspace and an initial project:
hipe:ivi argusionseranourt rastasi 116 gu Cnt news
‘arent already in an Angular workspace directory. For example, if you'e in the
Skip to main content
‘workspace from an earlier exercise, navigate to its parent.
2.Run ng new followed by the application name as shown here:
fag new angular-tour-of -heroes
3. ng_new prompts you for information about features to include inthe intial project. Accept the
defaults by pressing the Enter or Return key.
ng new installs the necessary npn packages and other dependencies that Angular requires. This can
lake a few minutes,
ng new also creates the following workspace and starter project files:
+ Anew workspace, with a root directory named angular-tour-of-heroes
‘+ Aninitial skeleton application project in the sre/app subdirectory
+ Related configuration files
‘The initial application project contains a simple application that's ready to run,
hipe:ivi argusionseranourt rastSkip to main content
verve ure application
Go to the workspace directory and launch the application,
od 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,
hipe:ivi argusionseranourt rastSkip to main content
mtrygurar cumponents
‘The page you see is the application shell, The shells 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 AppConponent that you just created:
ues verals
app.conponent..ts The component class cace, written in TyoeScript,
app.conponent .htel Tre component template, written in HTML.
app.conponent .css The component's private CSS styles,
hipe:ivi argusionseranourt rast 0asi 116A gu Cnt news
Skip to main content 4 new , Angular created test specifications for your new application,
Unfortunately, making these changes breaks your newly created specifications,
‘That wor't be a problem because Angular testing is outside the scope of this tutorial and wor't
be used
To learn more about testing with Angular, see Testing,
Change the application title
Open the apo.component.ts and change the title property value to Tour of Heroes.
app.co
title = ‘Tour of Heroes:
Open apo component .ntnl and delete the default template that ng new created. Replace itwith the
following line of HTML.
app.comp
nent.htm! (tem;
hte {(title} besht>
‘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
hipe:ivi argusionseranourt rast eoasi 116 gu Cnt news
' and displays the new application title.
Skip to main content
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.
hipe:ivi argusionseranourt rast m0Skip to main content
/* spplication-wide Styles */
mt
color: 4969;
font-family: Ariel, Helvetica, sans-serif;
font-size: 250%;
>
ha, na ¢
color: #444;
font-family: Arial, Helvetica, sans-serif,
font-weight: Lighter;
y
body {
margin: 2em;
y
body, input[types"text"], button {
color: #333;
font-family: Cambria, Georgia, serif;
y
button ¢
background-color: eee;
border: none
border-radius: 4px;
cursor: pointer;
color: black;
font-size: 1.2ren:
padding: trem;
margin-right: tren;
margin-bottom: tren;
hipe:ivi argusionseranourteroasth a0Skip to main content
background-color: black:
color: white;
y
button:disabled (
background-color: #eee;
color: #a2a;
cursor: auto;
y
/* everyubere else */
*{
font-family: Arial, Helvetica, sans-serif;
>
Final code review
Here are the code files discussed on this page.
stc/app/app.component.ts stc/app/app.component.htm stc/styles.css (excerpt)
Amport (Component) from
\gular/core’ ;
‘ecomponent({
hipe:ivi argusionseranourt rast oostandalone: true,
selector: ‘app-root’,
templateUrl: './app.conponent html’,
styleUris: ['./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
Next steps
+1. Thehero editor
hipe:ivi argusionseranourt rast
Last reviewed on Wed Aug 302029