Angular4のチュートリアル覚書

// 画面一つ一つの要素を部品化しコンポーネントとして(=部品単位で)切り出すことで、保守のしやすいソースを記述することができる
@Component({
  // selector: 'something' とすると、<something></something>という風に利用できる
  selector: 'app-root',
  // HTML(テンプレート)の場所　templateが指定されている時はそちらが優先される
  templateUrl: './app.component.html',
  // CSSの場所
  styleUrls: ['./app.component.css'],
  // このtitleやheroは下で定義している
  template: `<h1>{{title}}</h1><h2>{{hero}} details!</h2>`
})

interpolation binding HTML内の変数展開のこと。{{変数名}}

[(ngModel)]　とは、テキストボックス等との双方向バインディングのためのもの。大カッコはブラウザに変数を渡し、丸括弧はinputのアクションに紐付けるためのものだから。ngModelを使う時はapp.module.tsFormsModuleを読み込む必要がある。

モジュールを読み込む際は、app.module.tsの上のimportと@NgModule内のimportsを編集する。コンポーネントならdeclarationsに。

ngFor　Angularのfor文。ngIfなんかもある。ディレクティブという名前がある。

let hero of heroesとは、let(const,letのletか？) 仮変数名 of 配列

*ngForのアスタリスクについて　templateタグが生成されるということらしい。

javascript - angular 2 why asterisk (*) - Stack Overflow

TypeScriptではインスタンス生成での代入にコロン : を使用し、クラス宣言での代入にイコール = を使用する。

styles:で指定したcssはコンポーネント内にのみ適用される。

(click)の丸カッコはイベントのターゲットであることを識別するために必要。

[class.selected]="a === b"　これはaとbが等しいならselectedクラスを追加する。つまり、クライアント側で実行される。

@Componentには、そのコンポーネントに関するデータを書く。タグ名など。

~.component.tsは常にComponentクラスをexportする。

[変数名]は値のバインディング。丸括弧がないのでブラウザのアクションは受け取らない。

@Input()をプロパティの前につけることで、inputであることを宣言する

Angularにおけるサービスとは、MVCにおけるMやビジネスロジックのこと。

@Injectable修飾子をつけるためにはimportが必要。

Angular2のDIを知る - Qiita

Angular2 DOC GUIDEを翻訳する[DEPENDENCY INJECTION] - Qiita

TypeScriptではコンストラクタの引数にpublic/privateなどアクセス修飾子をつけることで、同名の変数をプロパティとして宣言し、コンストラクタで初期化する。

つまり、constructor (public a:int) {} は a:int; constructor (a:int) {this.a = a;}と等しい。

DIのプロバイダのスコープは2つあり、アプリケーション全体のスコープとコンポーネントのインスタンス単位のスコープがある。

JavaScriptプログラミング講座【Promise について】

// エグゼキューター関数
// resolve,rejectは関数オブジェクトであり、Promiseが渡すので、宣言とかはしなくていい
function ExecutorFunc( resolve , reject ) {
  if (1) {
    // 成功時
    // このresolveによって、次のthenの第一引数の関数が呼ばれる
    resolve('成功した');
  } else {
    // 失敗時
    reject('失敗した');
  }
}

// Promise オブジェクトを生成
// 実際のExecutorFuncにはファイル読み込みやAPI通信などの関数が入る
const promise = new Promise(ExecutorFunc);

// 通信や読み込みの成功時に呼び出される関数
// 例えばブラウザに表示したり
function FulfilledFunc (value) {
  console.log(value);
}

// promiseを実行して成功した場合はresolveによってFulfilledFuncが呼ばれる
promise.then( FulfilledFunc );

{{book?.title}}で、bookがnullでないときのみtitleプロパティにアクセスする

HTMLを記述した変数をバインドするとエスケープされてそのまま文字列として表示される。
[innerHTML]="msg" のようにバインドすれば、危険性のある場所(JSやフォーム要素)だけエスケープしたHTML文字列をHTMLとして表示できる。
完全にエスケープさせない場合は、

 constructor(private sanitizer: DomSanitizer) {

    // msgプロパティの内容に信頼済みマークを付与

    this.safeMsg = sanitizer.bypassSecurityTrustHtml(this.msg);

}

とする。

HTML attribute と DOM property - Please Sleep

プロパティと属性の違いとは、HTMLタグ内に書いてあるのが属性で、HTMLを解釈して生成されたDOM要素がもつ変数がプロパティ。

属性はあるがプロパティは存在しないものにバインディングするときはアトリビュートバインディングを使用する。アトリビュートバインディングは[attr.属性名]="変数名"のように使用する。

Angularにおけるパイプ(PurePipe, ImpurePipe)とメソッドの違い - Qiita

pipesという、文字列を変形させる仕組みがある。
{{変数名 | json}}　jsonに変換
{{変数名 | lowercase}}　小文字化
slice 指定範囲を抜き出す
number 数字として表示する、書式が指定できる
他にも小数点からパーセントとか

いろいろ備忘録

雑記です。

Angular4のチュートリアル覚書