docs: correct typos and formatting in the Getting Started guide (#30758)
PR Close #30758
This commit is contained in:
Lars Gyrup Brink Nielsen
Misko Hevery
parent
0d4f8c7dd9
commit
ef4a15bc0b
|
|
@ -9,7 +9,7 @@
|
|||
<!-- #docregion prices -->
|
||||
|
||||
<div class="cart-item" *ngFor="let item of items">
|
||||
<span>{{ item.name }} </span>
|
||||
<span>{{ item.name }}</span>
|
||||
<span>{{ item.price | currency }}</span>
|
||||
</div>
|
||||
<!-- #enddocregion prices -->
|
||||
<!-- #enddocregion prices -->
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<h3>Shipping Prices</h3>
|
||||
|
||||
<div class="shipping-item" *ngFor="let shipping of shippingCosts | async">
|
||||
<span>{{ shipping.type }} </span>
|
||||
<span>{{ shipping.type }}</span>
|
||||
<span>{{ shipping.price | currency }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,9 @@ export class ShippingComponent {
|
|||
// #enddocregion props
|
||||
|
||||
// #docregion inject-cart-service
|
||||
constructor(private cartService: CartService) {
|
||||
constructor(
|
||||
private cartService: CartService
|
||||
) {
|
||||
// #enddocregion inject-cart-service
|
||||
this.shippingCosts = this.cartService.getShippingPrices();
|
||||
// #docregion inject-cart-service
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ Users can click on a product name from the list to see details in a new view, wi
|
|||
In this section, you'll create the shopping cart. You'll:
|
||||
* Update the product details page to include a "Buy" button, which adds the current product to a list of products managed by a cart service.
|
||||
* Add a cart component, which displays the items you added to your cart.
|
||||
* Add a shipping component, which retrieves shipping prices for the items in the cart by using Angular's HttpClient to retrieve shipping data from a `.json` file.
|
||||
* Add a shipping component, which retrieves shipping prices for the items in the cart by using Angular's `HttpClient` to retrieve shipping data from a `.json` file.
|
||||
|
||||
{@a services}
|
||||
## Services
|
||||
|
|
@ -34,7 +34,7 @@ Later, in the [Forms](start/forms "Getting Started: Forms") part of this tutoria
|
|||
|
||||
1. Generate a cart service.
|
||||
|
||||
1. Right click on the `app` folder, choose `Angular Generator`, and choose `**Service**`. Name the new service `cart`.
|
||||
1. Right click on the `app` folder, choose `Angular Generator`, and choose `Service`. Name the new service `cart`.
|
||||
|
||||
<code-example header="src/app/cart.service.ts" path="getting-started/src/app/cart.service.1.ts"></code-example>
|
||||
|
||||
|
|
@ -238,7 +238,7 @@ In this section, you'll use the HTTP client to retrieve shipping prices from an
|
|||
|
||||
### Predefined shipping data
|
||||
|
||||
For the purpose of this Getting Started, we have provided shipping data in `assets/shipping.json`.
|
||||
For the purpose of this Getting Started guide, we have provided shipping data in `assets/shipping.json`.
|
||||
You'll use this data to add shipping prices for items in the cart.
|
||||
|
||||
<code-example header="src/assets/shipping.json" path="getting-started/src/assets/shipping.json">
|
||||
|
|
@ -306,7 +306,7 @@ Here you'll define the `get()` method that will be used.
|
|||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
Learn more: See the [HttpClient guide](guide/http "HttpClient guide") for more information about Angular's HttpClient.
|
||||
Learn more: See the [HttpClient guide](guide/http "HttpClient guide") for more information about Angular's `HttpClient`.
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ This will produce the files that you need to deploy.
|
|||
|
||||
#### Hosting the built project
|
||||
|
||||
The files in the `dist/my-project-name` folder are static and can be hosted on any web server capable of serving files (node, Java, .NET) or any backend (Firebase, Google Cloud, App Engine, others).
|
||||
The files in the `dist/my-project-name` folder are static and can be hosted on any web server capable of serving files (Node, Java, .NET) or any backend (Firebase, Google Cloud, App Engine, others).
|
||||
|
||||
### Hosting an Angular app on Firebase
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ You don't need to install anything: you'll build the app using the [StackBlitz](
|
|||
<header>New to web development?</header>
|
||||
|
||||
|
||||
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 [Codeacademy](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.
|
||||
|
||||
|
||||
</div>
|
||||
|
|
@ -69,7 +69,9 @@ In this section, you'll learn about template syntax by enhancing the "Products"
|
|||
`*ngFor` causes the `<div>` to be repeated for each product in the list.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
`*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 `*` is a structural directive.
|
||||
|
||||
</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:
|
||||
|
|
@ -131,9 +133,9 @@ The app now has a product list and sharing feature.
|
|||
In the process, you've learned to use five common features of Angular's template syntax:
|
||||
* `*ngFor`
|
||||
* `*ngIf`
|
||||
* Interpolation {{ }}
|
||||
* Property binding [ ]
|
||||
* Event binding ( )
|
||||
* Interpolation `{{ }}`
|
||||
* Property binding `[ ]`
|
||||
* Event binding `( )`
|
||||
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
|
|
|||
Loading…
Reference in New Issue