Angular備忘録【1】

本家のチュートリアルを参考に、自分があとから見返す用に記入します。

基本的に本家チュートリアルを見れば良いです。　https://angular.jp/guide/quickstart

二重波括弧：補完バインディング構文

コンポーネントのtitleプロパティをhtmlにバインディングする。

title = 'Tour of Heroes';

<h1>{{title}}</h1>

各ファイルの説明

import { Component, OnInit } from ‘@angular/core’;

angularのコアライブラリからComponentシンボルとOnlintシンボルをインポート

@Component({

selector: ‘app-heroes’,

templateUrl: ‘./heroes.component.html’,

styleUrls: [‘./heroes.component.css’]

})

@Component はAngularメタデータを指定するデコレータ関数。CLIで作成した初期状態では、３つのメタデータを指定している

selector コンポーネントのCSS要素セレクター
- <app-heroes>要素とこのコンポーントを紐付ける
templateUrl コンポーネントのテンプレートファイルの場所
- このコンポーネントが紐づくhtmlファイル
styleUrls コンポーネントのプライベートCSSスタイルの場所
- このコンポーネントが紐づくcssファイル

ngOnInitはライフサイクルフックです。 Angularは、コンポーネントの作成直後にngOnInitを呼び出します。初期化ロジックを置くのに適している。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

パイプ

パイプ演算子 ( | ) の直後にある単語Uppercaseは、組み込みのUppercasePipeを起動する。

（詳細はhttps://angular.jp/guide/pipes）

<h2>{{hero.name | uppercase}} Details</h2>

代表的なパイプ

UpperCasePipe, LowerCasePipe : 大文字小文字に変換
DatePipe : 日付形式に変換
DecimalPipe : 小数点切捨、ゼロ埋め
JsonPipe : objectをjson形式に変換
PercentPipe : パーセント表記に変換
SlicePipe : 文字列をスライス
CurrencyPipe : 通貨の書式変換

双方向データバインディング構文

<input>フォーム要素とhero.nameプロパティとの間に双方向データバインディングを設定する。

hero.nameプロパティからテキストボックスへ
テキストボックスからhero.nameプロパティへ

双方向に データを流すことができる。placeholderはinputタグの普通の属性。(http://www.htmq.com/html5/input_placeholder.shtml)

<input [(ngModel)]="hero.name" placeholder="name">