Angular-tutorial-memo

app_shell.txt

### 2018/06/05
https://angular.jp/tuto
- コンポーネント(Components)—テンプレート付きディレクティブ
- 構造ディレクティブ(Structural directives)—DOM要素を追加、削除してDOMレイアウトを変更するディレクティブ
属性ディレクティブ(Attri
属性ディレクティブ(Attribute directives)—要素やコンポーネント、別のディレクティブの見た目や動作を変更するディレクティブ

## コンポーネント
Angularアプリケーションの基礎的な構成要素.
 - スクリーン上にデータを表示
 - ユーザーの入力を待ち受けてその入力に対しアクションを取る

## AppComponetシェルの実装
ファイル構成
- `app.component.ts` :TypeScriptで書かれたコンポーネントクラスのコードド
- `app.component.html` : HTMLで書かれたコンポーネントのテンプレート
- `app.component.css` :このコンポーネント専用のCSS

補間バインディング
```
<h1>{{title}}</h1>
```

## ヒーロー情報を表示するためのコンポーネント作成とシェルへの設置

heros.component.ts
```
import { Component, OnInit } from '@angular/core';

//コンポーネントシンボル
//@Componentはメタデータ指定のためのデコレータ関数とよぶ
@Component({
  selector: 'app-heroes', //親コンポーネントで識別するためのもの,HTML内で対応
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
```

メタデータプロパティ
- selector:コンポーネントのCSS要素セレクタ
- templateUrl:コンポーネントのテンプレートファイルの場所
- styleUrls:コンポーネントのプライベートCSSスタイルの場所

-> heroの属性情報をクラスとして定義
heros.ts
```
export class Hero {
       id: number;
       name: string;
}
```

## UppercasePipe
補間バンディング内にuppercaseを記述することで書式設定する
```
<h1>{{ user.name | uppercase }} Details<\h1>
```

-> 小文字出力が大文字になる

## 双方向データバインディング
[(ngModel)] <-これが構文

- 双方向
`hero.name` プロパティ <-> HTMLテキストボックス
の間でデータを流す
※この時点でエラーメッセージ
```
Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'.
```

これはngModelがデフォルトのAngularディレクティブではないため
`FormsModule` というモジュールに属しているためこのインポートが必要

## 一覧表示
<li *ngFor="let hero of heroes">

## クリックイベントのハンドリング

```
(click)="onSelect(hero)"
```

一覧表示の装飾が目的のときはここに追加↓
<li *ngFor="let hero of heroes" (click)="onSelect(her))">
新しく追加したプロパティのバインディングについて
アプリを起動した初期のタイミングで`selectedHero` は選択されていないので表示されない

```
<div *ngIf="selectedHero">//ngIfは式が定義されていないときDOMの詳細を削除

  <h2>{{ selectedHero.name | uppercase }} Details</h2>
  <div><span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="selectedHero.name" placeholder="name">
    </label>
  </div>

</div>
```

## サブコンポーネント
親コンポーネントが子コンポーネントを制御するためのプロパティバインディング

## サービス
コンポーネント内では直接データの取得や保存を行うべきではない
= データの受け渡しに集中
-> その他の処理はサービスクラスへ委譲するべき

app_shell.txt~

### 2018/06/05
https://angular.jp/tutorial/toh-pt0

## コンポーネント
Angularアプリケーションの基礎的な構成要素.
 - スクリーン上にデータを表示
 - ユーザーの入力を待ち受けてその入力に対しアクションを取る

## AppComponetシェルの実装
ファイル構成
- `app.component.ts` :TypeScriptで書かれたコンポーネントクラスのコードド
- `app.component.html` : HTMLで書かれたコンポーネントのテンプレート
- `app.component.css` :このコンポーネント専用のCSS

補間バインディング
```
<h1>{{title}}</h1>
```

## ヒーロー情報を表示するためのコンポーネント作成とシェルへの設置

heros.component.ts
```
import { Component, OnInit } from '@angular/core';

//コンポーネントシンボル
//@Componentはメタデータ指定のためのデコレータ関数とよぶ
@Component({
  selector: 'app-heroes', //親コンポーネントで識別するためのもの,HTML内で対応
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
```

メタデータプロパティ
- selector:コンポーネントのCSS要素セレクタ
- templateUrl:コンポーネントのテンプレートファイルの場所
- styleUrls:コンポーネントのプライベートCSSスタイルの場所

-> heroの属性情報をクラスとして定義
heros.ts
```
export class Hero {
       id: number;
       name: string;
}
```

## UppercasePipe
補間バンディング内にuppercaseを記述することで書式設定する
```
<h1>{{ user.name | uppercase }} Details<\h1>
```

-> 小文字出力が大文字になる

## 双方向データバインディング
[(ngModel)] <-これが構文

- 双方向
`hero.name` プロパティ <-> HTMLテキストボックス
の間でデータを流す
※この時点でエラーメッセージ
```
Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'.
```

これはngModelがデフォルトのAngularディレクティブではないため
`FormsModule` というモジュールに属しているためこのインポートが必要

## 一覧表示
<li *ngFor="let hero of heroes">