From 04ddcfecd8134e4c57ce95ce35444d1e26b424a3 Mon Sep 17 00:00:00 2001 From: Kapunahele Wong Date: Thu, 19 Sep 2019 14:53:14 -0400 Subject: [PATCH] docs: edit copy on getting started step 1 (#32773) PR Close #32773 --- aio/content/start/index.md | 89 ++++++++++++++++++++------------------ 1 file changed, 46 insertions(+), 43 deletions(-) diff --git a/aio/content/start/index.md b/aio/content/start/index.md index 7f8c3820ba..f3084b8029 100644 --- a/aio/content/start/index.md +++ b/aio/content/start/index.md @@ -2,13 +2,12 @@ Welcome to Angular! -This tutorial introduces you to the essentials of Angular. -It leverages what you already know about HTML and JavaScript—plus some useful Angular features—to build a simple online store application, with a catalog, shopping cart, and check-out form. -You don't need to install anything: you'll build the app using the [StackBlitz](https://stackblitz.com/ "StackBlitz web site") online development environment. +This tutorial introduces you to the essentials of Angular by walking you through building a simple e-commerce site with a catalog, shopping cart, and check-out form. It uses the [StackBlitz](https://stackblitz.com/ "StackBlitz website") online development environment so you can get started right away. +
-We are using the StackBlitz Generator to show you a ready-made, simple application that you can examine and play with interactively. In actual development you will typically use the [Angular CLI](guide/glossary#command-line-interface-cli), a powerful command-line tool that lets you generate and modify applications. For more information, see the [CLI Overview](cli). +This guide uses the StackBlitz Generator to show you a ready-made, simple application that you can examine and play with interactively. In actual development you will typically use the [Angular CLI](guide/glossary#command-line-interface-cli), a powerful command-line tool that lets you generate and modify applications. For more information, see the [CLI Overview](cli).
@@ -16,7 +15,7 @@ We are using the StackBlitz Generator to show you a ready-made, simple applicati
New to web development?
-You'll find many resources to complement the Angular docs. Mozilla's MDN docs include both [HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML "Learning HTML: Guides and tutorials") and [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript "JavaScript") introductions. [TypeScript's docs](https://www.typescriptlang.org/docs/home.html "TypeScript documentation") include a 5-minute tutorial. Various online course platforms, such as [Udemy](http://www.udemy.com "Udemy online courses") and [Codecademy](https://www.codecademy.com/ "Codeacademy online courses"), also cover web development basics. + There are many resources to complement the Angular docs. Mozilla's MDN docs include both [HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML "Learning HTML: Guides and tutorials") and [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript "JavaScript") introductions. [TypeScript's docs](https://www.typescriptlang.org/docs/home.html "TypeScript documentation") include a 5-minute tutorial. Various online course platforms, such as [Udemy](http://www.udemy.com "Udemy online courses") and [Codecademy](https://www.codecademy.com/ "Codeacademy online courses"), also cover web development basics. @@ -64,25 +63,29 @@ behavior will be the same. ## Template syntax Angular's template syntax extends HTML and JavaScript. -In this section, you'll learn about template syntax by enhancing the "Products" area. +This section introduces 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.) +
+ +To help you get going, 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. Modify the product list template to display a list of product names. - 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 `
`, as follows: + 1. Each product in the list displays the same way, one after another on the page. To iterate over the predefined list of products, put the `*ngFor` directive on a `
`, as follows: - `*ngFor` causes the `
` to be repeated for each product in the list. + With `*ngFor`, the `
` repeats for each product in the list.
- `*ngFor` is a "structural directive". Structural directives shape or reshape the DOM's structure, typically by adding, removing, and manipulating the elements to which they are attached. Any directive with an `*` is a structural directive. + `*ngFor` is a "structural directive". Structural directives shape or reshape the DOM's structure, typically by adding, removing, and manipulating the elements to which they are attached. Any directive with an asterisk, `*`, is a structural directive.
@@ -97,18 +100,15 @@ file `product-list.component.html`. Product names added to list -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: +1. To make each product name a link to product details, add the `` element and set its title to be the product's name by using the property binding `[ ]` syntax, as follows: - - - In the preview pane, hover over the displayed product + In the preview pane, hold the pointer over a product name to see the bound name property value, which is - the same. Interpolation `{{ }}` lets you render the + the product name plus the word "details". + Interpolation `{{ }}` lets you render the property value as text; property binding `[ ]` lets you use the property value in a template expression. @@ -117,18 +117,18 @@ file `product-list.component.html`. -1. Add the product descriptions. On the `

` tag, use an `*ngIf` directive so that Angular only creates the `

` element if the current product has a description. +1. Add the product descriptions. On the `

` element, use an `*ngIf` directive so that Angular only creates the `

` element if the current product has a description. - 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 `

` element—including the word "Description"—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, Angular doesn't create the `

` element—including the word "Description".

Product descriptions added to list
-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 `