mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
42289f25c6
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
143 lines
5.2 KiB
Markdown
143 lines
5.2 KiB
Markdown
# Create a new project
|
|
|
|
You begin by creating an initial application using the Angular CLI.
|
|
Throughout this tutorial, you'll modify and extend that starter application to create the Tour of Heroes application.
|
|
|
|
In this part of the tutorial, you'll do the following:
|
|
|
|
1. Set up your environment.
|
|
1. Create a new workspace and initial application project.
|
|
1. Serve the application.
|
|
1. Make changes to the application.
|
|
|
|
<div class="alert is-helpful">
|
|
|
|
For the sample application that this page describes, see the <live-example></live-example>.
|
|
|
|
</div>
|
|
|
|
## Set up your environment
|
|
|
|
To set up your development environment, follow the instructions in [Local Environment Setup](guide/setup-local "Setting up for Local Development").
|
|
|
|
## Create a new workspace and an initial application
|
|
|
|
You develop applications in the context of an Angular [workspace](guide/glossary#workspace).
|
|
A workspace contains the files for one or more [projects](guide/glossary#project).
|
|
A project is the set of files that comprise an application or a library.
|
|
For this tutorial, you will create a new workspace.
|
|
|
|
To create a new workspace and an initial application project:
|
|
|
|
1. Ensure that you are not already in an Angular workspace folder.
|
|
For example, if you have previously created the Getting Started workspace, change to the parent of that folder.
|
|
|
|
1. Run the CLI command `ng new` and provide the name `angular-tour-of-heroes`, as shown here:
|
|
|
|
<code-example format="shell" language="shell">
|
|
|
|
ng new angular-tour-of-heroes
|
|
|
|
</code-example>
|
|
|
|
1. The `ng new` command prompts you for information about features to include in the initial application project.
|
|
Accept the defaults by pressing the Enter or Return key.
|
|
|
|
The Angular CLI installs the necessary Angular `npm` packages and other dependencies.
|
|
This can take a few minutes.
|
|
|
|
It also creates the following workspace and starter project files:
|
|
|
|
* A new workspace, with a root folder named `angular-tour-of-heroes`
|
|
* An initial skeleton app project in the `src/app` subfolder
|
|
* Related configuration files
|
|
|
|
The initial app project contains a simple Welcome application, ready to run.
|
|
|
|
## Serve the application
|
|
|
|
Go to the workspace directory and launch the application.
|
|
|
|
<code-example format="shell" language="shell">
|
|
|
|
cd angular-tour-of-heroes
|
|
ng serve --open
|
|
|
|
</code-example>
|
|
|
|
<div class="alert is-helpful">
|
|
|
|
The `ng serve` command builds the app, starts the development server,
|
|
watches the source files, and rebuilds the application as you make changes to those files.
|
|
|
|
The `--open` flag opens a browser to `http://localhost:4200`.
|
|
|
|
</div>
|
|
|
|
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 and navigate to the `src/app` folder to make some changes to the starter application.
|
|
|
|
You'll find the implementation of the shell `AppComponent` distributed over three files:
|
|
|
|
| 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. |
|
|
|
|
### Change the application title
|
|
|
|
Open the component class file \(`app.component.ts`\) and change the value of the `title` property to 'Tour of Heroes'.
|
|
|
|
<code-example header="app.component.ts (class title property)" path="toh-pt0/src/app/app.component.ts" region="set-title"></code-example>
|
|
|
|
Open the component template file \(`app.component.html`\) and delete the default template generated by the Angular CLI.
|
|
Replace it with the following line of HTML.
|
|
|
|
<code-example header="app.component.html (template)" path="toh-pt0/src/app/app.component.html"></code-example>
|
|
|
|
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.
|
|
|
|
<a id="app-wide-styles"></a>
|
|
|
|
### Add application styles
|
|
|
|
Most apps strive for a consistent look across the application.
|
|
The CLI generated 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.
|
|
|
|
<code-example header="src/styles.css (excerpt)" path="toh-pt0/src/styles.1.css"></code-example>
|
|
|
|
## Final code review
|
|
|
|
Here are the code files discussed on this page.
|
|
|
|
<code-tabs>
|
|
<code-pane header="src/app/app.component.ts" path="toh-pt0/src/app/app.component.ts"></code-pane>
|
|
<code-pane header="src/app/app.component.html" path="toh-pt0/src/app/app.component.html"></code-pane>
|
|
<code-pane header="src/styles.css (excerpt)" path="toh-pt0/src/styles.1.css"></code-pane>
|
|
</code-tabs>
|
|
|
|
## Summary
|
|
|
|
* You created the initial application structure using the Angular CLI
|
|
* You learned that Angular components display data
|
|
* You used the double curly braces of interpolation to display the application title
|
|
|
|
@reviewed 2022-02-28
|