diff --git a/aio/content/start/index.md b/aio/content/start/index.md index 821d60bbfc..7f8c3820ba 100644 --- a/aio/content/start/index.md +++ b/aio/content/start/index.md @@ -2,8 +2,8 @@ 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. +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.
@@ -16,10 +16,10 @@ 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. +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. -
+ @@ -27,11 +27,12 @@ You'll find many resources to complement the Angular docs. Mozilla's MDN docs in ## Create a new project

-Click here to create a new project in StackBlitz. +Click here to create a new project in StackBlitz.

-StackBlitz creates a starter Angular app. -We've seeded this particular app with a top bar—containing the store name and checkout icon—and the title for a product list. +StackBlitz creates a starter Angular app with a top +bar—containing the store name and +checkout icon—and the title for a product list.
@@ -42,100 +43,110 @@ We've seeded this particular app with a top bar—containing the store name
StackBlitz tips
-* 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.
{@a template-syntax} ## Template syntax - +Angular's template syntax extends HTML and JavaScript. +In this section, you'll learn about template syntax by enhancing the "Products" area. -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.) -(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. 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 `
`, 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 `
`, as follows: - `*ngFor` causes the `
` to be repeated for each product in the list. + `*ngFor` causes the `
` to be repeated 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. - +
- 1. To display the names of the products, use the interpolation syntax {{ }}. Interpolation renders a property's value as text. Inside the `
`, add an `

` 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 `
`, add an `

` to display the interpolation of the product's name property: - + - The preview pane immediately updates to display the name of each product in the list. + The preview pane immediately updates to display the name of each product in the list.
Product names added to list
-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: - + - - 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.
Product name anchor text is product name property
- -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 `

` tag, 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, 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—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, the `

` element—including the word "Description"—is not created.

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()` 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 `

- The generator creates starter files for all three parts of the component: + The generator creates starter files for all three parts of the component: * `product-alerts.component.ts` * `product-alerts.component.html` * `product-alerts.component.css` 1. Open `product-alerts.component.ts`. - + - 1. Notice the `@Component` decorator. This indicates that the following class is a component. It provides metadata about the component, including its templates, styles, and a selector. + 1. Notice the `@Component` decorator. This indicates that the following class is a component. It provides metadata about the component, including its templates, styles, and a selector. - * The `selector` is used to identify the component. The selector is the name you give the Angular component when it is rendered as an HTML element on the page. By convention, Angular component selectors begin with the prefix `app-`, followed by the component name. + * The `selector` is used to identify the component. The selector is the name you give the Angular component when it is rendered as an HTML element on the page. By convention, Angular component selectors begin with the prefix `app-`, followed by the component name. - * The template and style filenames. These reference the other two files generated for you. + * The template and style filenames. These reference the other two files generated for you. - 1. The component definition also includes an exported class (`ProductAlertsComponent`), which handles functionality for the component. + 1. The component definition also includes an exported class (`ProductAlertsComponent`), which handles functionality for the component. 1. Set up the new product alerts component to receive a product as input: @@ -244,23 +259,23 @@ We're going to create a new alert feature. The alert feature will take a product -1. Define the view for the new product alert component. +1. Define the view for the new product alert component. - Open the `product-alerts.component.html` template and replace the placeholder paragraph with a "Notify Me" button that appears if the product price is over $700. + Open the `product-alerts.component.html` template and replace the placeholder paragraph with a "Notify Me" button that appears if the product price is over $700. -1. Display the new product alert component as part of (a child of) the product list. +1. Display the new product alert component as part of (a child of) the product list. 1. Open `product-list.component.html`. - - 1. To include the new component, use its selector (`app-product-alert`) as you would an HTML element. - - 1. Pass the current product as input to the component using property binding. + + 1. To include the new component, use its selector (`app-product-alert`) as you would an HTML element. + + 1. Pass the current product as input to the component using property binding. -The new product alert component takes a product as input from the product list. With that input, it shows or hides the "Notify Me" button, based on the price of the product. The Phone XL price is over $700, so the "Notify Me" button appears on that product. +The new product alert component takes a product as input from the product list. With that input, it shows or hides the "Notify Me" button, based on the price of the product. The Phone XL price is over $700, so the "Notify Me" button appears on that product.
Product alert button added to products over $700 @@ -277,11 +292,11 @@ Learn more: See [Component Interaction](guide/component-interaction "Components {@a output} ## Output -The "Notify Me" button doesn't do anything yet. In this section, you'll set up the product alert component so that it emits an event up to the product list component when the user clicks "Notify Me". You'll define the notification behavior in the product list component. +The "Notify Me" button doesn't do anything yet. In this section, you'll set up the product alert component so that it emits an event up to the product list component when the user clicks "Notify Me". You'll define the notification behavior in the product list component. 1. Open `product-alerts.component.ts`. -1. Import `Output` and `EventEmitter` from `@angular/core`: +1. Import `Output` and `EventEmitter` from `@angular/core`: @@ -293,17 +308,17 @@ The "Notify Me" button doesn't do anything yet. In this section, you'll set up t -1. Next, define the behavior that should happen when the button is clicked. Recall that it's the parent (product list component)—not the product alerts component—that's going to take the action. In the `product-list.component.ts` file, define an `onNotify()` method, similar to the `share()` method: +1. Next, define the behavior that should happen when the button is clicked. Recall that it's the parent (product list component)—not the product alerts component—that's going to take the action. In the `product-list.component.ts` file, define an `onNotify()` method, similar to the `share()` method: -1. Finally, update the product list component to receive output from the product alerts component. +1. Finally, update the product list component to receive output from the product alerts component. - In `product-list.component.html`, bind the `app-product-alerts` component (which is what displays the "Notify Me" button) to the `onNotify()` method of the product list component. + In `product-list.component.html`, bind the `app-product-alerts` component (which is what displays the "Notify Me" button) to the `onNotify()` method of the product list component. -1. Try out the "Notify Me" button: +1. Try out the "Notify Me" button:
Product alert notification confirmation dialog @@ -322,11 +337,11 @@ Learn more: See [Component Interaction](guide/component-interaction "Components Congratulations! You've completed your first Angular app! -You have a basic online store catalog, with a product list, "Share" button, and "Notify Me" button. -You've learned about the foundation of Angular: components and template syntax. -You've also learned how the component class and template interact, and how components communicate with each other. +You have a basic online store catalog, with a product list, "Share" button, and "Notify Me" button. +You've learned about the foundation of Angular: components and template syntax. +You've also learned how the component class and template interact, and how components communicate with each other. To continue exploring Angular, choose either of the following options: -* [Continue to the "Routing" section](start/routing "Getting Started: Routing") to create a product details page that can be accessed by clicking a product name and that has its own URL pattern. +* [Continue to the "Routing" section](start/routing "Getting Started: Routing") to create a product details page that can be accessed by clicking a product name and that has its own URL pattern. * [Skip ahead to the "Deployment" section](start/deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server.