Angular-get started

https://angular.io/start#whats-next
Getting started with Angular
Welcome to Angular!
This tutorial introduces you to the essentials of Angular by walking you through building an e-commerce site with a catalog(mulu), shopping cart, and check-out form.

To help you get started right away, this tutorial uses a ready-made application that you can examine and modify interactively on StackBlitz without having to set up a local work environment.
StackBlitz is a browser-based development environment where you can create, save, and share projects using a variety of technologies.

Prerequisites xianjuetiaojian
To get the most out of this tutorial you should already have basic understanding of the following.
-HTML
-JavaScript
-TypeScript

Take a tour of the example application
You build Angular applications with components. Components define areas of responsibility in the UI that let you reuse sets of UI functionality.

1. A components consists of three things: 组件
- A component class that handles data and fuctionality.
- An HTML template that determines the UI.
- Component-specific styles that define the look and feel.

This guide demonstrates building an application with the following components.
- <app-root> the first component to load and the container for the other components.
- <app-top-bar> the store name and checkout button.
- <app-product-alerts> a component that contains the applicaiton's alerts.
For more information about components, see Introduction to Components.

2. create the sample project 创建工程
To create the sample project, generate the read-made sample project in StackBlitz. to save your work:
1. Log into StackBlitz.
2. Fork the project you generated.
3. Save periodically. 周期性的存储
----------------------------------------
还是本地建立工程吧
https://angular.io/guide/setup-local
----------------------------------------
In StackBliz, the preview pane on the right shows the starting state of the example applcation.
The preview features two areas:
进去了发现做的很逼真，厉害。
- a top bar with the store name, My Store, and a checkout button.
- a header for a product list, Products.
The project section on the left shows the source files that make up the application,
including the infrastructure and configuartion files.
When you generate the StackBlitz example applications that accompany the tutorials,
StackBlitz creates the starter files and mock data for you. The files you use throughout the tutorial are in the src folder.

For more information on how to use StackBlitz, see the 
https://developer.stackblitz.com/docs/platform/

3. Create the product list
In this section, you'll update the application to display a list of products.
You'll use predefined product data from the products.ts file and methods from the product-list.component.ts file.
This section guides you through editing the HTML,also known as the template.
1) In the product-list folder, open the template file prodcut-list.component.html.
2) Add an *ngFor structural directive on a <div>, as follows.
src/app/product-list/product-list.component.html
<h2>Products</h2>
<div *ngFor="let product of products">
</div>
With *ngFor, the <div> repeats for each product in the list.
Structural directives shape or reshape the DOM's structure, by adding, removing, and maniplulating elements. 
For more information about structural directives, see
https://angular.io/guide/structural-directives

3. Inside the <div>, add an <h3> and {{product.name}}.
The {{product.name}} statement is an example of Angular's interpolation syntax.插值语法
Interpolation {{}} lets you render the property value as text.

src/app/product-list/product-list.component.html
<h2>Products</h2>
<div *ngFor="let product of products">
  <h3>
    {{product.name}}
  </h3>
</div>
The preview paneupdates to display the name of each product in the list.