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

docs: edits to remove jargon (#42025) 

PR Close #42025
This commit is contained in:
Teri Glover 2021-05-10 16:09:25 +00:00 committed by Andrew Kushnir
parent 3a959152f9
commit ee0e3fbf89
7 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
aio/content/tutorial/index.md
View File

@ -3,22 +3,22 @@
<div class="callout is-helpful">
<header>Getting Started</header>
In this tutorial, you build your own app from the ground up, providing experience with the typical development process, as well as an introduction to basic app-design concepts, tools, and terminology.
In this tutorial, you build your own application from the ground up, providing experience with the typical development process, as well as an introduction to basic app-design concepts, tools, and terminology.
If you're completely new to Angular, you might want to try the [**Try it now**](start) quick-start app first.
If you're completely new to Angular, you might want to try the [**Try it now**](start) quick-start application first.
It is based on a ready-made partially-completed project, which you can examine and modify in the StackBlitz interactive development environment, where you can see the results in real time.
The "Try it" tutorial covers the same major topics&mdash;components, template syntax, routing, services, and accessing data via HTTP&mdash;in a condensed format, following the most current best practices.
The "Try it" tutorial covers the same major topics&mdash;components, template syntax, routing, services, and accessing data using HTTP&mdash;in a condensed format, following the most current best practices.
</div>
This _Tour of Heroes_ tutorial shows you how to set up your local development environment and develop an app using the [Angular CLI tool](cli "CLI command reference"), and provides an introduction to the fundamentals of Angular.
This _Tour of Heroes_ tutorial shows you how to set up your local development environment and develop an application using the [Angular CLI tool](cli "CLI command reference"), and provides an introduction to the fundamentals of Angular.
The _Tour of Heroes_ app that you build helps a staffing agency manage its stable of heroes.
The app has many of the features you'd expect to find in any data-driven application.
The finished app acquires and displays a list of heroes, edits a selected hero's detail, and navigates among different views of heroic data.
The _Tour of Heroes_ application that you build helps a staffing agency manage its stable of heroes.
The application has many of the features you'd expect to find in any data-driven application.
The finished application acquires and displays a list of heroes, edits a selected hero's detail, and navigates among different views of heroic data.
You will find references to and expansions of this app domain in many of the examples used throughout the Angular documentation, but you don't necessarily need to work through this tutorial to understand those examples.
You will find references to and expansions of this application domain in many of the examples used throughout the Angular documentation, but you don't necessarily need to work through this tutorial to understand those examples.
By the end of this tutorial you will be able to do the following:
@ -38,7 +38,7 @@ Angular can do whatever you need it to do.
<div class="callout is-helpful">
<header>Solution</header>
After completing all tutorial steps, the final app will look like this: <live-example name="toh-pt6"></live-example>.
After completing all tutorial steps, the final application will look like this: <live-example name="toh-pt6"></live-example>.
</div>
@ -63,7 +63,7 @@ where you can change the hero's name.
Clicking the "Back" button returns you to the Dashboard.
Links at the top take you to either of the main views.
If you click "Heroes," the app displays the "Heroes" master list view.
If you click "Heroes," the application displays the "Heroes" master list view.
<div class="lightbox">
@ -81,7 +81,7 @@ The following diagram captures all of the navigation options.
<img src='generated/images/guide/toh/nav-diagram.png' alt="View navigations">
</div>
Here's the app in action:
Here's the application in action:
<div class="lightbox">
<img src='generated/images/guide/toh/toh-anim.gif' alt="Tour of Heroes in Action">

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

@ -1,17 +1,17 @@
# 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 app.
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.
2. Create a new workspace and initial app project.
2. Create a new workspace and initial application project.
3. Serve the application.
4. Make changes to the application.
<div class="alert is-helpful">
For the sample app that this page describes, see the <live-example></live-example>.
For the sample application that this page describes, see the <live-example></live-example>.
</div>
@ -22,9 +22,9 @@ To set up your development environment, follow the instructions in [Local Enviro
## 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.
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 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:
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.
2. Run the CLI command `ng new` and provide the name `angular-tour-of-heroes`, as shown here:
@ -33,7 +33,7 @@ To create a new workspace and an initial app project:
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.
3. 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.
@ -43,7 +43,7 @@ It also creates the following workspace and starter project files:
* An initial skeleton app project in the `src/app` subfolder.
* Related configuration files.
The initial app project contains a simple Welcome app, ready to run.
The initial app project contains a simple Welcome application, ready to run.
## Serve the application
@ -57,13 +57,13 @@ Go to the workspace directory and launch the application.
<div class="alert is-helpful">
The `ng serve` command builds the app, starts the development server,
watches the source files, and rebuilds the app as you make changes to those files.
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 app running in your browser.
You should see the application running in your browser.
## Angular components
@ -75,7 +75,7 @@ They display data on the screen, listen for user input, and take action based on
## 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 app.
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:
@ -137,4 +137,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 application title.

10
aio/content/tutorial/toh-pt1.md
View File

@ -6,7 +6,7 @@ and place that component in the application shell.
<div class="alert is-helpful">
For the sample app that this page describes, see the <live-example></live-example>.
For the sample application that this page describes, see the <live-example></live-example>.
</div>
@ -141,7 +141,7 @@ Here it binds the `hero.name` property to the HTML textbox so that data can flow
### The missing _FormsModule_
Notice that the app stopped working when you added `[(ngModel)]`.
Notice that the application stopped working when you added `[(ngModel)]`.
To see the error, open the browser development tools and look in the console
for a message like
@ -158,7 +158,7 @@ It belongs to the optional `FormsModule` and you must _opt-in_ to using it.
## _AppModule_
Angular needs to know how the pieces of your application fit together
and what other files and libraries the app requires.
and what other files and libraries the application requires.
This information is called _metadata_.
Some of the metadata is in the `@Component` decorators that you added to your component classes.
@ -177,13 +177,13 @@ Open `AppModule` (`app.module.ts`) and import the `FormsModule` symbol from the
region="formsmodule-js-import">
</code-example>
Then add `FormsModule` to the `@NgModule` metadata's `imports` array, which contains a list of external modules that the app needs.
Then add `FormsModule` to the `@NgModule` metadata's `imports` array, which contains a list of external modules that the application needs.
<code-example path="toh-pt1/src/app/app.module.ts" header="app.module.ts (@NgModule imports)"
region="ng-imports">
</code-example>
When the browser refreshes, the app should work again. You can edit the hero's name and see the changes reflected immediately in the `<h2>` above the textbox.
When the browser refreshes, the application should work again. You can edit the hero's name and see the changes reflected immediately in the `<h2>` above the textbox.
### Declare `HeroesComponent`

2
aio/content/tutorial/toh-pt2.md
View File

@ -205,7 +205,7 @@ To apply the `.selected` class to the `<li>` when the user clicks it, use class
</div>
Angular's [class binding](guide/attribute-binding#class-binding) can add and remove a CSS class conditionally.
Just add `[class.some-css-class]="some-condition"` to the element you want to style.
Add `[class.some-css-class]="some-condition"` to the element you want to style.
Add the following `[class.selected]` binding to the `<li>` in the `HeroesComponent` template:

4
aio/content/tutorial/toh-pt4.md
View File

@ -175,7 +175,7 @@ as if heroes could be fetched synchronously.
<code-example path="toh-pt4/src/app/heroes/heroes.component.1.ts" header="src/app/heroes/heroes.component.ts" region="get-heroes">
</code-example>
This will not work in a real app.
This will not work in a real application.
You're getting away with it now because the service currently returns _mock heroes_.
But soon the application will fetch heroes from a remote server,
which is an inherently _asynchronous_ operation.
@ -434,7 +434,7 @@ Here are the code files discussed on this page.
## Summary
* You refactored data access to the `HeroService` class.
* You registered the `HeroService` as the _provider_ of its service at the root level so that it can be injected anywhere in the app.
* You registered the `HeroService` as the _provider_ of its service at the root level so that it can be injected anywhere in the application.
* You used [Angular Dependency Injection](guide/dependency-injection) to inject it into a component.
* You gave the `HeroService` _get data_ method an asynchronous signature.
* You discovered `Observable` and the RxJS _Observable_ library.

6
aio/content/tutorial/toh-pt5.md
View File

@ -93,7 +93,7 @@ configures it with the `routes` in one step by calling
</div>
Next, `AppRoutingModule` exports `RouterModule` so it will be available throughout the app.
Next, `AppRoutingModule` exports `RouterModule` so it will be available throughout the application.
<code-example path="toh-pt5/src/app/app-routing.module.ts" header="src/app/app-routing.module.ts (exports array)" region="export-routermodule">
</code-example>
@ -313,7 +313,7 @@ At this point, all application routes are in place.
The `DashboardComponent` hero links do nothing at the moment.
Now that the router has a route to `HeroDetailComponent`,
fix the dashboard hero links to navigate via the _parameterized_ dashboard route.
fix the dashboard hero links to navigate using the _parameterized_ dashboard route.
<code-example
path="toh-pt5/src/app/dashboard/dashboard.component.html"
@ -370,7 +370,7 @@ This section explains the following:
* Get the route that created it
* Extract the `id` from the route
* Acquire the hero with that `id` from the server via the `HeroService`
* Acquire the hero with that `id` from the server using the `HeroService`
Add the following imports:

8
aio/content/tutorial/toh-pt6.md
View File

@ -43,7 +43,7 @@ By using the In-memory Web API, you won't have to set up a server to learn about
**Important:** the In-memory Web API module has nothing to do with HTTP in Angular.
If you're just reading this tutorial to learn about `HttpClient`, you can [skip over](#import-heroes) this step.
If you're reading this tutorial to learn about `HttpClient`, you can [skip over](#import-heroes) this step.
If you're coding along with this tutorial, stay here and add the In-memory Web API now.
</div>
@ -82,7 +82,7 @@ Replace the default contents of `in-memory-data.service.ts` with the following:
The `in-memory-data.service.ts` file will take over the function of `mock-heroes.ts`.
However, don't delete `mock-heroes.ts` yet, as you still need it for a few more steps of this tutorial.
When the server is ready, you'll detach the In-memory Web API, and the app's requests will go through to the server.
When the server is ready, you'll detach the In-memory Web API, and the application's requests will go through to the server.
{@a import-heroes}
@ -205,7 +205,7 @@ Because each service method returns a different kind of `Observable` result,
### Tap into the Observable
The `HeroService` methods will **tap** into the flow of observable values
and send a message, via the `log()` method, to the message area at the bottom of the page.
and send a message, using the `log()` method, to the message area at the bottom of the page.
They'll do that with the RxJS `tap()` operator,
which looks at the observable values, does something with those values,
@ -286,7 +286,7 @@ The hero now appears in the list with the changed name.
To add a hero, this application only needs the hero's name. You can use an `<input>`
element paired with an add button.
Insert the following into the `HeroesComponent` template, just after
Insert the following into the `HeroesComponent` template, after
the heading:
<code-example path="toh-pt6/src/app/heroes/heroes.component.html" region="add" header="src/app/heroes/heroes.component.html (add)"></code-example>