Angular.jsのチュートリアルをして遊ぼう ①テンプレート構文

今回はAngular.jsの公式サイトのチュートリアルのテンプレート構文の箇所を実施して遊ぼうと思います。 Angular.jsは1.x時代に少し触っただけなので楽しみです。

1. 今日のお供

久しぶりのビールです！

2. 今回参考にしたサイト

私はただ備忘録として、遊んだ結果を書きたいだけなので、本気でやりたい方はこちらを参考にされたほうが良いかと思います。

angular.jp

3. 新しいプロジェクトを作成する

ドキュメントの「Click here to create a new project in StackBlitz.」リンクを押下すると、ブラウザでStackBlitzのページが開きます。
このWEB上の環境で開発を進めていく形となります。

StackBlitz

4. テンプレート構文を使用する

すでに定義されているproducts(商品情報）をテンプレート構文を使用して表示できるようにしていきます。
商品情報はproducts.tsに定義されています。

products.ts

(1) product-list.component.htmlを開きます。

product-list.component.html

(2) ngForセレクタを使用し、繰り返し制御をします。

下記をproduct-list.component.htmlに記入すると、商品数分「商品」が表示されます。

<!-- 商品分繰り返す -->
<div *ngFor="let product of products">
  商品
</div>

ngFor

(3) 内挿構文{{}}を使用し、商品名を表示します。

下記をproduct-list.component.htmlに記入すると、商品数分の商品名が表示されます。

<!-- 商品分繰り返す -->
<div *ngFor="let product of products">
  <h3>{{ product.name }}</h3>
</div>

内挿構文{{}}

(4) プロパティバインディング[]を使用し、アンカーのタイトルを表示します。

下記をproduct-list.component.htmlに記入すると、アンカーのタイトルが設定されます。

<!-- 商品分繰り返す -->
<div *ngFor="let product of products">
  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>
</div>

プロパティバインディング

(5) ngIfセレクタを使用し、商品の説明を表示します。

下記をproduct-list.component.htmlに記入すると、商品説明が設定されている商品のみ、商品の説明が表示されます。

<!-- 商品分繰り返す -->
<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>

ngif

(6) イベントバインディング()を使用し、イベントを紐付けます。

下記をproduct-list.component.htmlに記入すると、clickイベントにproduct-list.component.tsで定義されているshare()イベントが紐付けされます。

<!-- 商品分繰り返す -->
<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 (click)="share()">
    Share
  </button>
</div>

イベントバインディング()

share()イベントの内容

share()イベント

5. テンプレート構文が使えました！

今回はチュートリアルにあるとおり、下記のテンプレート構文を使用しました。

① ngFor
② ngIf
③ 内挿{{}}
④ プロパティバインディング[]
⑤ イベントバインディング（）

次回はコンポーネントの作成・使用が出来たらいいなと思います。