This is a cherry pick of #35533 so we can get the new nav structure in angular.io sooner instead of on next. PR Close #36822
This commit is contained in:
Judy Bogart
committed by
Alex Rickabaugh
Alex Rickabaugh
parent
d0e024ec2d
commit
9e755f30f0
@ -1,21 +1,20 @@
|
||||
# Getting Started with Angular: Your First App
|
||||
# Part 1: Getting started with a basic Angular app
|
||||
|
||||
Welcome to Angular!
|
||||
|
||||
This tutorial introduces you to the essentials of Angular by walking you through a simple e-commerce site with a catalog, shopping cart, and check-out form.
|
||||
To help you get started right away, this guide uses a simple ready-made application that you can examine and play with interactively.
|
||||
To help you get started right away, this guide uses a simple ready-made application that you can examine and modify interactively (without having to [set up a local work environment](guide/setup-local "Setup guide")).
|
||||
|
||||
<div class="callout is-helpful">
|
||||
<header>New to web development?</header>
|
||||
|
||||
|
||||
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/ "Codecademy online courses"), also cover web development basics.
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{@a new-project}
|
||||
## Create a new project
|
||||
## Create the sample project
|
||||
|
||||
<h4>
|
||||
<live-example name="getting-started-v0" noDownload>Click here to create the ready-made sample project in StackBlitz.</live-example>
|
||||
@ -58,11 +57,11 @@ example apps.
|
||||
|
||||
</div>
|
||||
|
||||
<div class="alert is-helpful">
|
||||
<div class="alert is-important">
|
||||
|
||||
If you go directly to the [StackBlitz online development environment](https://stackblitz.com/) and choose to [start a new Angular workspace](https://stackblitz.com/fork/angular), you get a generic stub application, rather than this [illustrative sample](#new-project). Once you have been introduced to the basic concepts here, this can be helpful for working interactively while you are learning Angular.
|
||||
|
||||
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).
|
||||
In actual development you will typically use the [Angular CLI](guide/glossary#command-line-interface-cli "Definition of CLI"), a powerful command-line tool that lets you generate and modify applications. For a full step-by-step guide that shows how to use the CLI to create a new project and all of its parts, see [Tutorial: Tour of Heroes](tutorial).
|
||||
|
||||
</div>
|
||||
|
||||
@ -163,8 +162,7 @@ In the process, you've learned to use five common features of Angular's template
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
For more information about the full capabilities of Angular's
|
||||
template syntax, see [Template Syntax](guide/template-syntax "Template Syntax").
|
||||
For a fuller introduction to Angular's template syntax, see [Introduction to components and templates](guide/architecture-components#template-syntax "Template Syntax").
|
||||
|
||||
</div>
|
||||
|
||||
@ -218,7 +216,7 @@ The next section expands the app's capabilities by adding a new component—
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
For more information about components and how they interact with templates, see [Introduction to Components](guide/architecture-components "Architecture > Introduction to Components").
|
||||
For more information about components and how they interact with templates, see [Introduction to Components](guide/architecture-components "Concepts > Introduction to Components and Templates").
|
||||
|
||||
</div>
|
||||
|
||||
@ -358,5 +356,5 @@ 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/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/start-deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server.
|
||||
* [Continue to the "In-app navigation" section](start/start-routing "Try it: In-app navigation") 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/start-deployment "Try it: Deployment") to move to local development, or deploy your app to Firebase or your own server.
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
# Getting Started with Angular: Managing Data
|
||||
# Try it: Manage data
|
||||
|
||||
At the end of [Routing](start/start-routing "Getting Started: Routing"), the online store application has a product catalog with two views: a product list and product details.
|
||||
At the end of [In-app Navigation](start/start-routing "Try it: In-app Navigation"), the online store application has a product catalog with two views: a product list and product details.
|
||||
Users can click on a product name from the list to see details in a new view, with a distinct URL, or route.
|
||||
|
||||
This page guides you through creating the shopping cart in three phases:
|
||||
|
||||
* Update the product details page to include a "Buy" button, which adds the current product to a list of products that a cart service manages.
|
||||
* Update the product details view to include a "Buy" button, which adds the current product to a list of products that a cart service manages.
|
||||
* Add a cart component, which displays the items in the 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.
|
||||
|
||||
{@a services}
|
||||
## Services
|
||||
|
||||
Services are an integral part of Angular applications. In Angular, a service is an instance of a class that you can make available to any part of your application using Angular's [dependency injection system](guide/glossary#dependency-injection-di "dependency injection definition").
|
||||
Services are an integral part of Angular applications. In Angular, a service is an instance of a class that you can make available to any part of your application using Angular's [dependency injection system](guide/glossary#dependency-injection-di "Dependency injection definition").
|
||||
|
||||
Services are the place where you share data between parts of your application. For the online store, the cart service is where you store your cart data and methods.
|
||||
|
||||
@ -24,28 +24,28 @@ simulate sharing and being notified about product changes.
|
||||
They cannot, however, buy products.
|
||||
|
||||
In this section, you add a "Buy" button to the product
|
||||
details page and set up a cart service to store information
|
||||
details view and set up a cart service to store information
|
||||
about products in the cart.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
Later, the [Forms](start/start-forms "Getting Started: Forms") part of
|
||||
this tutorial guides you through accessing this cart service
|
||||
from the page where the user checks out.
|
||||
A later part of this tutorial, [Use forms for user input](start/start-forms "Try it: Forms for user input"), guides you through accessing this cart service from the view where the user checks out.
|
||||
|
||||
</div>
|
||||
|
||||
{@a generate-cart-service}
|
||||
### Define a cart service
|
||||
|
||||
1. Generate a cart service.
|
||||
|
||||
1. Right click on the `app` folder, choose `Angular Generator`, and choose `Service`. Name the new service `cart`.
|
||||
1. To generate a cart service, 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>
|
||||
|
||||
1. StackBlitz might generate the `@Injectable()` decorator without the `{ providedIn: 'root' }` statement as above. Instead, the generator provides the cart service in `app.module.ts` by default. For the purposes
|
||||
of this tutorial, either way works. The `@Injectable()` `{ providedIn: 'root' }` syntax allows [tree shaking](/guide/dependency-injection-providers#tree-shakable-providers), which is beyond the scope of this guide.
|
||||
<div class="alert is-helpful>
|
||||
|
||||
The StackBlitz generator might provide the cart service in `app.module.ts` by default. That differs from the example, which uses a bundle-optimization technique, an `@Injectable()` decorator with the `{ providedIn: 'root' }` statement.
|
||||
For more information about services, see [Introduction to Services and Dependency Injection](guide/architecture-services "Concepts > Intro to Services and DI").
|
||||
|
||||
</div>
|
||||
|
||||
1. In the `CartService` class, define an `items` property to store the array of the current products in the cart.
|
||||
|
||||
@ -121,18 +121,18 @@ This section walks you through using the cart service to add a product to the ca
|
||||
</div>
|
||||
|
||||
|
||||
## Create the cart page
|
||||
## Create the cart view
|
||||
|
||||
At this point, users can put items in the cart by clicking "Buy", but they can't yet see their cart.
|
||||
|
||||
Create the cart page in two steps:
|
||||
Create the cart view in two steps:
|
||||
|
||||
1. Create a cart component and configure routing to the new component. At this point, the cart page will only have default text.
|
||||
1. Create a cart component and configure routing to the new component. At this point, the cart view has only default text.
|
||||
1. Display the cart items.
|
||||
|
||||
### Set up the component
|
||||
|
||||
To create the cart page, begin by following the same steps you did to create the product details component and configure routing for the new component.
|
||||
To create the cart view, begin by following the same steps you did to create the product details component and configure routing for the new component.
|
||||
|
||||
1. Generate a cart component, named `cart`.
|
||||
|
||||
@ -160,7 +160,7 @@ Create the cart page in two steps:
|
||||
1. To see the new cart component, click the "Checkout" button. You can see the "cart works!" default text, and the URL has the pattern `https://getting-started.stackblitz.io/cart`, where `getting-started.stackblitz.io` may be different for your StackBlitz project.
|
||||
|
||||
<div class="lightbox">
|
||||
<img src='generated/images/guide/start/cart-works.png' alt="Display cart page before customizing">
|
||||
<img src='generated/images/guide/start/cart-works.png' alt="Display cart view before customizing">
|
||||
</div>
|
||||
|
||||
### Display the cart items
|
||||
@ -206,7 +206,7 @@ You can use services to share data across components:
|
||||
|
||||
1. Test your cart component.
|
||||
|
||||
1. Click on "My Store" to go to the product list page.
|
||||
1. Click on "My Store" to go to the product list view.
|
||||
1. Click on a product name to display its details.
|
||||
1. Click "Buy" to add the product to the cart.
|
||||
1. Click "Checkout" to see the cart.
|
||||
@ -215,7 +215,7 @@ You can use services to share data across components:
|
||||
Repeat to add more items to the cart.
|
||||
|
||||
<div class="lightbox">
|
||||
<img src='generated/images/guide/start/cart-page-full.png' alt="Cart page with products added">
|
||||
<img src='generated/images/guide/start/cart-page-full.png' alt="Cart view with products added">
|
||||
</div>
|
||||
|
||||
|
||||
@ -227,7 +227,7 @@ StackBlitz tip: Any time the preview refreshes, the cart is cleared. If you make
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
For more information about services, see [Introduction to Services and Dependency Injection](guide/architecture-services "Architecture > Intro to Services and DI").
|
||||
For more information about services, see [Introduction to Services and Dependency Injection](guide/architecture-services "Concepts > Intro to Services and DI").
|
||||
|
||||
</div>
|
||||
|
||||
@ -303,11 +303,11 @@ First, define a `get()` method.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
For more information about Angular's `HttpClient`, see [HttpClient](guide/http "HttpClient guide").
|
||||
For more information about Angular's `HttpClient`, see the [Client-Server Interaction](guide/http "Server interaction through HTTP") guide.
|
||||
|
||||
</div>
|
||||
|
||||
## Define the shipping page
|
||||
## Define the shipping view
|
||||
|
||||
Now that your app can retrieve shipping data, create a shipping component and template.
|
||||
|
||||
@ -347,7 +347,7 @@ Now that your app can retrieve shipping data, create a shipping component and t
|
||||
|
||||
The `async` pipe returns the latest value from a stream of data and continues to do so for the life of a given component. When Angular destroys that component, the `async` pipe automatically stops. For detailed information about the `async` pipe, see the [AsyncPipe API documentation](/api/common/AsyncPipe).
|
||||
|
||||
1. Add a link from the cart page to the shipping page:
|
||||
1. Add a link from the cart view to the shipping view:
|
||||
|
||||
<code-example header="src/app/cart/cart.component.html" path="getting-started/src/app/cart/cart.component.2.html"></code-example>
|
||||
|
||||
@ -371,5 +371,5 @@ Now that your app can retrieve shipping data, create a shipping component and t
|
||||
Congratulations! You have an online store application with a product catalog and shopping cart. You can also look up and display shipping prices.
|
||||
|
||||
To continue exploring Angular, choose either of the following options:
|
||||
* [Continue to the "Forms" section](start/start-forms "Getting Started: Forms") to finish the app by adding the shopping cart page and a checkout form.
|
||||
* [Skip ahead to the "Deployment" section](start/start-deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server.
|
||||
* [Continue to the "Forms" section](start/start-forms "Try it: Forms for User Input") to finish the app by adding the shopping cart view and a checkout form.
|
||||
* [Skip ahead to the "Deployment" section](start/start-deployment "Try it: Deployment") to move to local development, or deploy your app to Firebase or your own server.
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
# Getting Started with Angular: Deployment
|
||||
# Try it: Deployment
|
||||
|
||||
|
||||
To deploy your application, you have to compile it, and then host the JavaScript, CSS, and HTML on a web server. Built Angular applications are very portable and can live in any environment or served by any technology, such as Node, Java, .NET, PHP, and many others.
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
|
||||
Whether you came here directly from [Your First App](start "Getting Started: Your First App"), or completed the entire online store application through the [Routing](start/start-routing "Getting Started: Routing"), [Managing Data](start/start-data "Getting Started: Managing Data"), and [Forms](start/start-forms "Getting Started: Forms") sections, you have an application that you can deploy by following the instructions in this section.
|
||||
|
||||
Whether you came here directly from [Part 1](start "Try it: A basic app"), or completed the entire online store application through the [In-app navigation](start/start-routing "Try it: In-app navigation"), [Manage data](start/start-data "Try it: Manage data"), and [Forms for user input](start/start-forms "Try it: Forms for user input") sections, you have an application that you can deploy by following the instructions in this section.
|
||||
|
||||
</div>
|
||||
|
||||
@ -81,7 +79,7 @@ Read more about development and distribution of your application in the [Buildin
|
||||
|
||||
## Join the Angular community
|
||||
|
||||
You are now an Angular developer! [Share this moment](https://twitter.com/intent/tweet?url=https://angular.io/start&text=I%20just%20finished%20the%20Angular%20Getting%20Started%20Tutorial "Angular on Twitter"), tell us what you thought of this Getting Started, or submit [suggestions for future editions](https://github.com/angular/angular/issues/new/choose "Angular GitHub repository new issue form").
|
||||
You are now an Angular developer! [Share this moment](https://twitter.com/intent/tweet?url=https://angular.io/start&text=I%20just%20finished%20the%20Angular%20Getting%20Started%20Tutorial "Angular on Twitter"), tell us what you thought of this get-started exercise, or submit [suggestions for future editions](https://github.com/angular/angular/issues/new/choose "Angular GitHub repository new issue form").
|
||||
|
||||
Angular offers many more capabilities, and you now have a foundation that empowers you to build an application and explore those other capabilities:
|
||||
|
||||
@ -91,7 +89,3 @@ Angular offers many more capabilities, and you now have a foundation that empowe
|
||||
* Angular also has an extensive [network of 3rd-party tools and libraries](https://angular.io/resources "Angular resources list").
|
||||
|
||||
Keep current by following the [Angular blog](https://blog.angular.io/ "Angular blog").
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# Getting Started with Angular: Forms
|
||||
# Try it: Use forms for user input
|
||||
|
||||
At the end of [Managing Data](start/start-data "Getting Started: Managing Data"), the online store application has a product catalog and a shopping cart.
|
||||
At the end of [Managing Data](start/start-data "Try it: Managing Data"), the online store application has a product catalog and a shopping cart.
|
||||
|
||||
This section walks you through adding a form-based checkout feature to collect user information as part of checkout.
|
||||
|
||||
@ -49,7 +49,7 @@ Now that you've defined the form model in the component class, you need a checko
|
||||
|
||||
## Create the checkout form
|
||||
|
||||
Use the following steps to add a checkout form at the bottom of the "Cart" page.
|
||||
Use the following steps to add a checkout form at the bottom of the "Cart" view.
|
||||
|
||||
1. Open `cart.component.html`.
|
||||
|
||||
@ -73,7 +73,7 @@ Use the following steps to add a checkout form at the bottom of the "Cart" page.
|
||||
After putting a few items in the cart, users can now review their items, enter their name and address, and submit their purchase:
|
||||
|
||||
<div class="lightbox">
|
||||
<img src='generated/images/guide/start/cart-with-items-and-form.png' alt="Cart page with checkout form">
|
||||
<img src='generated/images/guide/start/cart-with-items-and-form.png' alt="Cart view with checkout form">
|
||||
</div>
|
||||
|
||||
To confirm submission, open the console where you should see an object containing the name and address you submitted.
|
||||
@ -82,4 +82,4 @@ To confirm submission, open the console where you should see an object containin
|
||||
|
||||
Congratulations! You have a complete online store application with a product catalog, a shopping cart, and a checkout function.
|
||||
|
||||
[Continue to the "Deployment" section](start/start-deployment "Getting Started: Deployment") to move to local development, or deploy your app to Firebase or your own server.
|
||||
[Continue to the "Deployment" section](start/start-deployment "Try it: Deployment") to move to local development, or deploy your app to Firebase or your own server.
|
||||
|
||||
@ -1,22 +1,20 @@
|
||||
# Getting Started with Angular: Routing
|
||||
# In-app navigation
|
||||
|
||||
At the end of [Your First App](start "Getting Started: Your First App"), the online store application has a basic product catalog.
|
||||
At the end of [part 1](start "Get started with a basic Angular app"), the online store application has a basic product catalog.
|
||||
The app doesn't have any variable states or navigation.
|
||||
There is one URL, and that URL always displays the "My Store" page with a list of products and their descriptions.
|
||||
|
||||
This guide shows you how to use the Angular Router to display full product details in separate pages, each with their own URLs.
|
||||
This guide shows you how to use Angular [routing](guide/glossary#router "Router definition") to give the user in-app navigation. In a single-page app, instead of loading new pages, you show different components and data to the user based on where the user is in the application.
|
||||
|
||||
The Angular [Router](guide/glossary#router "Router definition") enables you to show different components and data to the user based on where the user is in the application.
|
||||
The router enables navigation from one view to the next as users perform tasks such as the following:
|
||||
The router lets you display full product details in separate [views](guide/glossary#view "View definition"), each with its own URL. Routing enables navigation from one view to the next (within the same page) as users perform tasks such as the following:
|
||||
|
||||
* Entering a URL in the address bar to navigate to a corresponding page.
|
||||
* Clicking links on the page to navigate to a new page.
|
||||
* Entering a URL in the address bar to navigate to a corresponding view.
|
||||
* Clicking links on the page to navigate to a new view.
|
||||
* Clicking the browser's back and forward buttons to navigate backward and forward through the browser history.
|
||||
|
||||
|
||||
## Registering a route
|
||||
|
||||
The app is already set up to use the Angular Router and to use routing to navigate to the product list component you modified earlier. This section shows you how to define a route to show individual product details.
|
||||
The app is already set up to use the Angular `Router` and to use routing to navigate to the product list component you modified earlier. This section shows you how to define a route to show individual product details.
|
||||
|
||||
1. Generate a new component for product details. Give the component the name `product-details`.
|
||||
|
||||
@ -47,7 +45,7 @@ The app is already set up to use the Angular Router and to use routing to naviga
|
||||
Notice that the URL in the preview window changes. The final segment is `products/#` where `#` is the number of the route you clicked.
|
||||
|
||||
<div class="lightbox">
|
||||
<img src="generated/images/guide/start/product-details-works.png" alt="Product details page with updated URL">
|
||||
<img src="generated/images/guide/start/product-details-works.png" alt="Product details view with updated URL">
|
||||
</div>
|
||||
|
||||
|
||||
@ -73,7 +71,7 @@ The product details component handles the display of each product. The Angular R
|
||||
The `ActivatedRoute` is specific to each routed component that the Angular Router loads. It contains information about the
|
||||
route, its parameters, and additional data associated with the route.
|
||||
|
||||
By injecting the `ActivatedRoute`, you are configuring the component to use a service. While this part of the Getting Started tutorial uses this syntax briefly, the [Managing Data](start/start-data "Getting Started: Managing Data") page covers services in more detail.
|
||||
By injecting the `ActivatedRoute`, you are configuring the component to use a *service*. The [Managing Data](start/start-data "Try it: Managing Data") page covers services in more detail.
|
||||
|
||||
|
||||
1. In the `ngOnInit()` method, subscribe to route parameters and fetch the product based on the `productId`.
|
||||
@ -98,7 +96,7 @@ Now, when users click on a name in the product list, the router navigates them t
|
||||
|
||||
<div class="alert is-helpful">
|
||||
|
||||
For more information about the Angular Router, see [Routing & Navigation](guide/router "Routing & Navigation").
|
||||
For more information about the Angular Router, see [Routing & Navigation](guide/router "Routing & Navigation guide").
|
||||
|
||||
</div>
|
||||
|
||||
@ -107,9 +105,9 @@ For more information about the Angular Router, see [Routing & Navigation](guide/
|
||||
|
||||
Congratulations! You have integrated routing into your online store.
|
||||
|
||||
* Products are linked from the product list page to individual products.
|
||||
* Products are linked from the product list view to individual products.
|
||||
* Users can click on a product name from the list to see details in a new view, with a distinct URL/route.
|
||||
|
||||
To continue exploring Angular, choose either of the following options:
|
||||
* [Continue to the "Managing Data" section](start/start-data "Getting Started: Managing Data") to add a shopping cart feature, use a service to manage the cart data and use HTTP to retrieve external data for shipping prices.
|
||||
* [Skip ahead to the Deployment section](start/start-deployment "Getting Started: Deployment") to deploy your app to Firebase or move to local development.
|
||||
* [Continue to the "Managing Data" section](start/start-data "Try it: Managing Data") to add a shopping cart feature, use a service to manage the cart data and use HTTP to retrieve external data for shipping prices.
|
||||
* [Skip ahead to the Deployment section](start/start-deployment "Try it: Deployment") to deploy your app to Firebase or move to local development.
|
||||
|
||||
Reference in New Issue
Block a user