Angular JS TUTORIAL

JSフレームワーク

TUTORIAL

2.THE HERO EDITOR

Hero object

AppComponent の子クラス？のHeroクラスは、importの行の直下に書けと書いている。(たぶん、コーディングルール。どこに書いても動作に影響はない。)

Multi-line template strings

tsファイル - template：1行のときは''で囲む。複数行のときは``(バッククオーテーション)で囲む。

Two-Way Binding

input 要素の値をオブジェクトに反映させる方法について紹介する。

  1. app.module.ts にFormsModule を追加。
  2. HTMLのinputタグを以下のように書く。
<input [(ngModel)]="hero.name" placeholder="name">

3.MASTER/DETAIL

Where We Left Off

2.THE HERO EDITORをベースに修正していく。

Creating heroes

Heroクラスのオブジェクトの配列を作る方法について紹介する。

Listing heroes with ngFor

  • 要素をheroesの数だけループする方法を紹介。 ngForを使い、以下のように書く。heroes配列のオブジェクトを変数heroに格納し、 各オブジェクトのプロパティは{{hero.プロパティ}}で参照できる。 ※ngForは
  • 要素に限らず、他の要素でも使えるっぽい。

    <li *ngFor="let hero of heroes">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>

    Styling our heroes

    @Component のtemplateとプロパティと同じ階層にstylesプロパティを追加することで、スタイルシートを書ける。 特定のコンポーネントだけに反映されるというメリット。

    スタイルシートの各要素について軽く調査した。インラインでコメントする。

    styles: [`
  .selected {
    background-color: #CFD8DC !important;
    color: white;
  }
  .heroes {
    margin: 0 0 2em 0;
    list-style-type: none;
    padding: 0;
    width: 15em;
  }
  .heroes li {
    cursor: pointer;

    マウスカーソルの形状を指定する際に使用する。(参考) pointer：リンクカーソル(指)を表示する。

        position: relative;
    left: 0;
    background-color: #EEE;
    margin: .5em;
    padding: .3em 0;
    height: 1.6em;
    border-radius: 4px;
  }
  .heroes li.selected:hover {
    background-color: #BBD8DC !important;
    color: white;
  }

    li.selected???? →章「Styling the selection」で説明している。

      .heroes li:hover {
    color: #607D8B;         /* 文字色（前景色）を指定する　*/
    background-color: #DDD; /* 背景色を指定する */
    left: .1em;             /* 左からの配置位置を指定 */
  }

    hover擬似クラス:カーソルが乗っている要素にスタイルを適用する。(参考) ここではカーソルが乗った\<li>要素の色を変えると共に、左からの配置位置を少し移動している。

      .heroes .text {
    position: relative;
    top: -3px;
  }

    textクラス定義していないので使われていないっぽい。

      .heroes .badge {
    display: inline-block;
    font-size: small;
    color: white;
    padding: 0.8em 0.7em 0 0.7em;
    background-color: #607D8B;
    line-height: 1em;
    position: relative;
    left: -1px;
    top: -4px;
    height: 1.8em;
    margin-right: .8em;
    border-radius: 4px 0 0 4px;
  }
`]

    Hide the empty detail with ngIf

    ngIf を使い、オブジェクトが定義されていないときはHTML要素を表示しないようにする。

    Styling the selection

    条件を満たしたときにCSSのクラスを追加する方法。

    [class.selected]="hero === selectedHero"

    この場合、heroとselectedHeroが同じ値の場合(選択されたオブジェクトである場合)、selectedクラスを追加し、スタイルシートによって文字色を変える。