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

docs: edit copy on first step of getting started (#32751) 

PR Close #32751
This commit is contained in:
Kapunahele Wong 2019-09-18 16:09:56 -04:00 committed by Andrew Kushnir
parent 5ace90f04d
commit 5c2e890d76
1 changed files with 105 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
aio/content/start/index.md
View File

@ -30,8 +30,9 @@ You'll find many resources to complement the Angular docs. Mozilla's MDN docs in
<live-example name="getting-started-v0" noDownload>Click here to create a new project in StackBlitz.</live-example>
</h4>
StackBlitz creates a starter Angular app.
We've seeded this particular app with a top bar&mdash;containing the store name and checkout icon&mdash;and the title for a product list.
StackBlitz creates a starter Angular app with a top
bar&mdash;containing the store name and
checkout icon&mdash;and the title for a product list.
<figure>
@ -42,31 +43,37 @@ We've seeded this particular app with a top bar&mdash;containing the store name
<div class="callout is-helpful">
<header>StackBlitz tips</header>
* Log into StackBlitz, so you can save and resume your work. If you have a GitHub account, you can log into StackBlitz with that account. In order to save your progress, first fork the project using the Fork button at the top left, then you'll be able to save your work to your own StackBlitz account by clicking the Save button.
* To copy a code example from this tutorial, click the icon at the top right of the code example box, and then paste the code snippet from the clipboard into StackBlitz.
* If the StackBlitz preview pane isn't showing what you expect, save and then click the refresh button.
* StackBlitz is continually improving, so there may be slight differences in generated code, but the app's behavior will be the same.
* Log into StackBlitz so you can save and resume your work.
If you have a GitHub account, you can log into StackBlitz
with that account. In order to save your progress, first
fork the project using the Fork button at the top left,
then you'll be able to save your work to your own StackBlitz
account by clicking the Save button.
* To copy a code example from this tutorial, click the icon
at the top right of the code example box, and then paste the
code snippet from the clipboard into StackBlitz.
* If the StackBlitz preview pane isn't showing what you
expect, save and then click the refresh button.
* StackBlitz is continually improving, so there may be
slight differences in generated code, but the app's
behavior will be the same.
</div>
{@a template-syntax}
## Template syntax
<!--
Angular extends HTML with a template syntax that gives components control over the display of content.
This section introduces five things you can do in an Angular template to affect what your user sees, based on the component's state and behavior:
-->
Angular's template syntax extends HTML and JavaScript.
In this section, you'll learn about template syntax by enhancing the "Products" area.
(So that you can focus on the template syntax, the following steps use predefined product data and methods from the `product-list.component.ts` file.)
1. In the `product-list` folder, open the template file `product-list.component.html`.
1. In the `product-list` folder, open the template
file `product-list.component.html`.
1. Modify the product list template to display a list of product names.
1. We want each product in the list to be displayed the same way, one after the other on the page. To iterate over the predefined list of products, use the `*ngFor` directive. Put the `*ngFor` directive on a `<div>`, as shown below:
1. Each product in the list will be displayed the same way, one after the other on the page. To iterate over the predefined list of products, put the `*ngFor` directive on a `<div>`, as follows:
<code-example header="src/app/product-list/product-list.component.html" path="getting-started/src/app/product-list/product-list.component.2.html" region="ngfor">
</code-example>
@ -79,9 +86,9 @@ In this section, you'll learn about template syntax by enhancing the "Products"
</div>
1. To display the names of the products, use the interpolation syntax {{ }}. Interpolation renders a property's value as text. Inside the `<div>`, add an `<h3>` heading to display the interpolation of the product's name property:
1. To display the names of the products, use the interpolation syntax `{{ }}`. Interpolation renders a property's value as text. Inside the `<div>`, add an `<h3>` to display the interpolation of the product's name property:
<code-example path="getting-started/src/app/product-list/product-list.component.2.html" region="interpolation">
<code-example path="getting-started/src/app/product-list/product-list.component.2.html" header="src/app/product-list/product-list.component.html" region="interpolation">
</code-example>
The preview pane immediately updates to display the name of each product in the list.
@ -90,36 +97,40 @@ In this section, you'll learn about template syntax by enhancing the "Products"
<img src="generated/images/guide/start/template-syntax-product-names.png" alt="Product names added to list">
</figure>
1. In the final app, each product name will be a link to product details. Add the anchor now, and set the anchor's title to be the product's name by using the property binding [ ] syntax, as shown below:
1. To make each product name a link to product details, add the anchor and set the anchor's title to be the product's name by using the property binding `[ ]` syntax, as follows:
<code-example path="getting-started/src/app/product-list/product-list.component.2.html">
<code-example path="getting-started/src/app/product-list/product-list.component.2.html" header="src/app/product-list/product-list.component.html">
</code-example>
<!--
To do: Description and code don't match exactly. Do we want to just use product name as the anchor hover text to show a simple property or append "details" to show an expression? Also affects screen shot.
-->
In the preview pane, hover over the displayed product name to see the bound name property value. They are the same. Interpolation {{ }} lets you render the property value as text; property binding [ ] lets you use the property value in a template expression.
In the preview pane, hover over the displayed product
name to see the bound name property value, which is
the same. Interpolation `{{ }}` lets you render the
property value as text; property binding `[ ]` lets you
use the property value in a template expression.
<figure>
<img src="generated/images/guide/start/template-syntax-product-anchor.png" alt="Product name anchor text is product name property">
</figure>
1. Add the product descriptions. On the paragraph tag, use an `*ngIf` directive so that the paragraph element is only created if the current product has a description.
1. Add the product descriptions. On the `<p>` tag, use an `*ngIf` directive so that Angular only creates the `<p>` element if the current product has a description.
<code-example path="getting-started/src/app/product-list/product-list.component.3.html">
<code-example path="getting-started/src/app/product-list/product-list.component.3.html" header="src/app/product-list/product-list.component.html">
</code-example>
The app now displays the name and description of each product in the list, as shown below. Notice that the final product does not have a description paragraph at all. Because the product's description property is empty, the paragraph element&mdash;including the word "Description"&mdash;is not created.
The app now displays the name and description of each product in the list. Notice that the final product does not have a description paragraph. Because the product's description property is empty, the `<p>` element&mdash;including the word "Description"&mdash;is not created.
<figure>
<img src="generated/images/guide/start/template-syntax-product-description.png" alt="Product descriptions added to list">
</figure>
1. Add a button so users can share a product with friends. Bind the button's `click` event to the `share()` event that we defined for you (in `product-list.component.ts`). Event binding is done by using ( ) around the event, as shown below:
1. Add a button so users can share a product with friends. Bind the button's `click` event to the `share()` method (in `product-list.component.ts`). Event binding uses a set of parentheses, `( )`, around the event, as in the following `<button>` tag:
<code-example path="getting-started/src/app/product-list/product-list.component.4.html">
<code-example path="getting-started/src/app/product-list/product-list.component.4.html" header="src/app/product-list/product-list.component.html">
</code-example>
Each product now has a "Share" button:
@ -145,7 +156,8 @@ In the process, you've learned to use five common features of Angular's template
<div class="alert is-helpful">
Learn more: See the [Template Syntax guide](guide/template-syntax "Template Syntax") for information about the full capabilities of Angular's template syntax.
For more information about the full capabilities of Angular's
template syntax, see the [Template Syntax guide](guide/template-syntax "Template Syntax").
</div>
@ -153,13 +165,16 @@ Learn more: See the [Template Syntax guide](guide/template-syntax "Template Synt
{@a components}
## Components
*Components* define areas of responsibility in your UI that let you reuse these sets of UI functionality.
*Components* define areas of responsibility in the user interface (UI)
that let you reuse sets of UI functionality.
You've already built one with the product list component.
A component is comprised of three things:
* **A component class,** which handles data and functionality. In the previous section, the product data and the `share()` method were defined for you in the component class.
* **An HTML template,** which determines what is presented to the user. In the previous section, you modified the product list's HTML template to display the name, description, and a "Share" button for each product.
* **Component-specific styles** that define the look and feel. The product list does not define any styles.
A component consists of three things:
* **A component class** that handles data and functionality. In the previous section, the product data and the `share()` method in the component class handle data and functionality respectively.
* **An HTML template** that determines the UI. In the previous section, the product list's HTML template displays the name, description, and a "Share" button for each product.
* **Component-specific styles** that define the look and feel.
Though product list does not define any styles, this is where component CSS
resides.
<!--
### Class definition
@ -179,24 +194,24 @@ Let's take a quick look a the product list component's class definition:
### Composition
-->
An Angular application is composed of a tree of components, in which each Angular component has a specific purpose and responsibility.
An Angular application comprises a tree of components, in which each Angular component has a specific purpose and responsibility.
Currently, our app has three components:
Currently, the example app has three components:
<figure>
<img src="generated/images/guide/start/app-components.png" alt="Online store with three components">
</figure>
* `app-root` (orange box) is the application shell. This is the first component to load, and the parent of all other components. You can think of it as the base page.
* `app-root` (orange box) is the application shell. This is the first component to load and the parent of all other components. You can think of it as the base page.
* `app-top-bar` (blue background) is the store name and checkout button.
* `app-product-list` (purple box) is the product list that you modified in the previous section.
In the next section, you'll expand the app's capabilities by adding a new component for a product alert. You'll add it as a child of the product list component.
The next section expands the app's capabilities by adding a new component&mdash;a product alert&mdash;as a child of the product list component.
<div class="alert is-helpful">
Learn more: See [Introduction to Components](guide/architecture-components "Architecture > Introduction to Components") for more information about components and how they interact with templates.
For more information about components and how they interact with templates, see [Introduction to Components](guide/architecture-components "Architecture > Introduction to Components").
</div>
@ -205,9 +220,9 @@ Learn more: See [Introduction to Components](guide/architecture-components "Arch
## Input
Currently, the product list displays the name and description of each product.
You might have noticed that the product list component also defines a `products` property that contains imported data for each product. (See the `products` array in `products.ts`.)
The product list component also defines a `products` property that contains imported data for each product from the `products` array in `products.ts`.
We're going to create a new alert feature. The alert feature will take a product as an input. It will then check the product's price, and, if the price is greater than $700, it will display a "Notify Me" button that lets users sign up for notifications when the product goes on sale.
The next step is to create a new alert feature that takes a product as an input. It will then check the product's price, and, if the price is greater than $700, it will display a "Notify Me" button that lets users sign up for notifications when the product goes on sale.
1. Create a new product alerts component.