기본 Angular 앱 시작하기 (2)

[Angular] 「기본적인 Angular 앱을 시작한다」를 해본다(준비)

[Angular] 「기본적인 Angular 앱을 시작한다」를 해본다(1)

Angular 튜토리얼을 시도하고 있습니다.

상품 목록 만들기

Angular 공식 페이지 : 상품 목록 만들기

오늘부터 본격적으로 튜토리얼을 진행합니다. 라고 해도 지시대로 카피＆페이스트 해 갈 뿐입니다만.

1.product-list 폴더의 product-list.component.html에 다음 태그를 작성합니다.

product-list.component.html

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

2.div 태그 안에 아래의 h3 태그를 기술한다.

product-list.component.html

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

  <h3>
      {{ product.name }}
  </h3>

</div>

이 시점에서 프리뷰 화면은 다음과 같습니다.


* ngFor는 for 문과 같습니다.

3. {{ product.name }}을 아래의 a 태그로 묶습니다.

product-list.component.html

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

제품 이름에 마우스를 올리면 문장이 표시됩니다.
튜토리얼을 읽고 있으면이 []의 사용법을 속성 바인딩이라고 부르는 것 같습니다.

4. 아래의 p 태그를 추가합니다.

product-list.component.html

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

product.description이 표시됩니다.
*ngIf는 if 문과 같습니다.

그런데 product.description은 무엇입니까?
파일을 살펴보면 products.ts에 설명된 내용처럼 보입니다.
덧붙여서, 이하의 내용으로 되어 있습니다.

products.ts

export const products = [
  {
    name: 'Phone XL',
    price: 799,
    description: 'A large phone with one of the best screens'
  },
  {
    name: 'Phone Mini',
    price: 699,
    description: 'A great phone with one of the best cameras'
  },
  {
    name: 'Phone Standard',
    price: 299,
    description: ''
  }
];

5. 버튼을 추가합니다.

product-list.component.html에 다음 태그를 추가합니다.

product-list.component.html

<button (click)="share()">
  shareボタン
</button>

버튼이 표시됩니다. (지금까지 클릭해도 메시지가 표시되는 것만으로 share되는 것은 아닙니다만.)
(click)과 같은 사용법을 이벤트 바인딩이라고 부르는 것 같습니다.

다음 기사 : [Angular] 「기본적인 Angular 앱을 시작한다」를 해 본다(3)자식 컴퍼넌트에 데이터를 건네준다