Setup Local Environment

Preinstall

Node.js
Npm

Current versions:

Node: 18.13.0
npm: 8.19.3
Angular: 15.0.0
Angular CLI: 15.0.5

Install the Angular CLI

To install the Angular CLI, open a terminal window and run the following command:

npm install -g @angular/cli

Create a workspace and initial application

Run the CLI command ng new and provide the name "mystore"

ng new mystore

Run the application

ng serve --open

It will show the page like the following

Home Page

Create component top-bar

应用程序需要实现的效果如下图，

Show Product List

运行下面的命令来创建组件 top-bar

ng generate component top-bar

该命令会生成4个文件

File Name	Description
top-bar.component.css	样式文件
top-bar.component.html	HTML文件
top-bar.component.spec.ts	单元测试文件
top-bar.component.ts	类文件

并在文件app.module.ts中注册组件top-bar

@NgModule({
  declarations: [
    AppComponent,
    TopBarComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在文件top-bar.component.html 中添加如下代码，显示标题和按钮

<div class="topBar">
    <span class="title" routerLink="/">My Store</span>
    <button type="submit"><img src="assets/images/checkout.png" alt="Checkout" title="Checkout">
        <span>Checkout</span>
    </button>
</div>

删除文件app.component.html中的内容，并添加如下代码。Angular是通过这个样式选择器来加载相应的组件。

<div class="mainArea">
  <app-top-bar></app-top-bar>
</div>

当前实现的效果如下：

Top Bar

Create component 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.service.ts file and methods from the product-list.component.ts file.

接下来运行下面的命令来创建组件 product-list

ng generate component product-list

运行如下命令创建 products service

ng generate service products

打开products service文件，添加一个接口和一个方法来返回products的数据。

export interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
}

getProductList(): Product[] {
    return [
      {
        id: 1,
        name: 'Phone XL',
        price: 799,
        description: 'A large phone with one of the best screens'
      },
      {
        id: 2,
        name: 'Phone Mini',
        price: 699,
        description: 'A great phone with one of the best cameras'
      },
      {
        id: 3,
        name: 'Phone Standard',
        price: 299,
        description: ''
      }
    ];
  }

打开文件product-list.component.html，在div上添加 *ngFor 指令。

<h2>Products</h2>

<div *ngFor="let product of products">
</div>

在div中显示产品名称，并给title属性绑定显示的值。

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

</div>

添加 *ngIf 指令显示产品描述信息，Angular只显示有描述信息的产品。

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>

</div>

添加一个共享的按钮，并将click事件绑定到文件product-list.component.ts 中的share()方法。

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>

  <button type="button" (click)="share()">
    Share
  </button>

</div>

share() {
    alert('The product has been shared!');
}

最终的效果如下：