honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: updated text to match the Getting started guide (#26421) 

PR Close #26421
This commit is contained in:
Vani 2018-10-11 11:37:30 -07:00 committed by Miško Hevery
parent b115374601
commit f6a2dbf4f5
1 changed files with 53 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
aio/content/tutorial/toh-pt0.md
View File

@ -1,46 +1,63 @@
# The Application Shell
## Install the Angular CLI
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 app.
Install the [Angular CLI](https://github.com/angular/angular-cli), if you haven't already done so.
In this part of the tutorial, you'll do the following:
<code-example language="sh" class="code-shell">
npm install -g @angular/cli
</code-example>
1. Set up your environment.
2. Create a new workspace and initial app project.
3. Serve the application.
4. Make changes to the application.
## Create a new application
Create a new project named `angular-tour-of-heroes` with this CLI command.
## Set up your environment
<code-example language="sh" class="code-shell">
ng new angular-tour-of-heroes
</code-example>
The Angular CLI generated a new project with a default application and supporting files.
To set up your development environment, follow these instructions in [Getting Started](guide/quickstart):
* [Prerequisites](guide/quickstart#prerequisites)
* [Install the Angular CLI](guide/quickstart#install-cli)
<div class="alert is-helpful">
You can add pre-packaged functionality to a new project by using the `ng add` command. The `ng add` command transforms a project by applying the schematics in the specified package.
For more information, see the [Angular CLI documentation.](https://github.com/angular/angular-cli/wiki/add "Angular CLI documentation")
Angular Material provides schematics for typical app layouts.
See the [Angular Material documentation](https://material.angular.io/guides "Angular Material documentation") for details.
**Note:**: You do not need to complete the entire Getting Started. After you complete the above two sections of Getting Started, your environment is set up. Continue below to create the Tour of Heroes workspace and an initial app project.
</div>
## Create a new workspace and an initial application
You develop apps 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 app, a library, or end-to-end (e2e) tests. For this tutorial, you will create a new workspace.
To create a new workspace and an initial app 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.
2. Run the CLI command `ng new` and provide the name `angular-tour-of-heroes`, as shown here:
<code-example language="sh" class="code-shell">
ng new angular-tour-of-heroes
</code-example>
3. The `ng new` command prompts you for information about features to include in the initial app 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, also called `angular-tour-of-heroes` (in the `src` subfolder).
* An end-to-end test project (in the e2e subfolder).
* Related configuration files.
The initial app project contains a simple Welcome app, ready to run.
## Serve the application
Go to the project directory and launch the application.
Go to the workspace directory and launch the application.
<code-example language="sh" class="code-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,
@ -60,16 +77,17 @@ 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.
## Change the application title
## Make changes to the application
Open the project in your favorite editor or IDE and navigate to the `src/app` folder.
Open the project in your favorite editor or IDE and navigate to the `src/app` folder to make some changes to the starter app.
You'll find the implementation of the shell `AppComponent` distributed over three files:
1. `app.component.ts`&mdash; the component class code, written in TypeScript.
1. `app.component.ts`&mdash; the component class code, written in TypeScript.
1. `app.component.html`&mdash; the component template, written in HTML.
1. `app.component.css`&mdash; 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'.
@ -80,19 +98,19 @@ 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 path="toh-pt0/src/app/app.component.html"
<code-example path="toh-pt0/src/app/app.component.html"
title="app.component.html (template)" linenums="false">
</code-example>
The double curly braces are Angular's *interpolation binding* syntax.
This interpolation binding presents the component's `title` property value
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 app-wide-styles}
## Add application styles
### Add application styles
Most apps strive for a consistent look across the application.
The CLI generated an empty `styles.css` for this purpose.
@ -105,10 +123,10 @@ Here's an excerpt from the `styles.css` for the _Tour of Heroes_ sample app.
## Final code review
The source code for this tutorial and the complete _Tour of Heroes_ global styles
are available in the <live-example></live-example>.
The source code for this tutorial and the complete _Tour of Heroes_ global styles
are available in the <live-example></live-example>.
Here are the code files discussed on this page.
Here are the code files discussed on this page.
<code-tabs>
@ -118,8 +136,8 @@ Here are the code files discussed on this page.
<code-pane title="src/app/app.component.html" path="toh-pt0/src/app/app.component.html">
</code-pane>
<code-pane
title="src/styles.css (excerpt)"
<code-pane
title="src/styles.css (excerpt)"
path="toh-pt0/src/styles.1.css">
</code-pane>
</code-tabs>
@ -128,4 +146,4 @@ Here are the code files discussed on this page.
* 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 app title.
* You used the double curly braces of interpolation to display the app title.