本-Angularアプリケーションプログラミング

P144 開発モードと本番モード

開発モードでは、重複した変更検知サイクルのチェックなど、開発の補助を目的とした様々なチェックを実施している。 本館環境へ移行する際には、本番モードを有効にしておくこと。 本番モードを有効にするには、main.tsに対して以下のコードを追加するだけで…

P90 パイプ

【役割】 テンプレート上に埋め込まれたデータを加工/整形するための仕組み【構文】 {{exp | pipe [:param1 ...]}}(例) {{price | currency:'JPY'}}Angular標準パイプには、lowercaseやsliceなどがあり、P91にまとめられている。Angularアプリケーションプロ…

P79 テンプレート参照変数

【意味】 テンプレート内の特定の要素を参照するための変数【構文】 <element #variable /> element:任意の要素 variable:変数の名前(例1) <input #txt id="txt" name="txt" type="text" (input)="show(txt.value)" /> (例2) <label>姓:<input #last type="text" (change)="0" /></label><br /> <label>名:<input #first type="text" (change)="0" /></label> <div>こんばんわ、…</div></element>

P75 バブリングのキャンセル

イベントのstopPropagationメソッドを呼び出しておく事で、子要素で発生したイベントを拾って親要素も反応するという事を防ぐ事ができる。 click1(e: any) { e.stopPropagation(); console.log('ここは呼び出されるが、親要素のバブリングは行われない'); }A…

P69 $event

(click)="hoge(event)"では、undefinedとなってしまう。 angularでは、(click)="hoge($event)"の様に$eventオブジェクトを利用する必要がある。また、イベントハンドラ内で利用する際には、明示的に$eventを渡す必要がある。 イベントオブジェクトの主なメン…

P66 イベントバインディング

【構文】 <element (event)="exp">~</element> element:任意の要素 event:イベント名(See. P67) exp:イベント発生時に実行される命令(=テンプレートステートメント)(例) 【注意事項】 ●利用できない構文がある テンプレートステートメントでは、以下の構文が禁止されている。 ・new演算子 ・…

P59 属性とプロパティ

属性は要素の初期値を表すのに対して、プロパティは現在値を表す。 <input id="txt" type="text" value="hoge"> (中略) txt.value = ''foo'; console.log(txt.value); //foo console.log(txt.getAttribute('value')); //hoge Angularアプリケーションプログラミング作者: 山田祥寛出版社/メーカー: 技…

P51 バインドとサニタイジング

・データバインディングによるテキストの埋め込みは、ただの文字列として出力される。 ・inerHTMLプロパティにプロパティバインディングを行った場合でも、通常はscriptやbuttonなどサニタイジングされる。 ・DomSanitizer#bypassSecurityTrustHtmlメソッド(…

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

【構文】 [prop] = expprop:パロパティ名 exp:任意の式【同じ意味となる方法】 template: '' template: '' template: '' いずれの構文を利用するかは利用者の好みにもよるが、1つのアプリの中で統一するべきである。 通常は、ブラケット構文([prop]="exp")が…

P48 ?.演算子[Safe Navigation Operator]

template: '<div>{{member?.name}}</div>' ?.演算子は、オブジェクトmemberが空であるかどうかを確認し、空でない場合だけnameプロパティにアクセスする様になる。Angularアプリケーションプログラミング作者: 山田祥寛出版社/メーカー: 技術評論社発売日: 2017/08/04メ…

P47 {{...}}式の注意点

【利用できない演算子がある】 副作用を伴う演算子は、{{...}}式では禁止されている。 具体的には、以下の様なものです。 ・代入演算子(=、+=、-=など) ・new演算子 ・";"や","など連結を表す演算子 ・インクリメント/デクリメント演算子(++、--) ・ビット演…

P44 データバインディング構文

データ方向 種類 記法 コンポーネント→ビュー Interpolation(補間) {{...}} コンポーネント→ビュー プロパティ/属性バインディング(※1) [property]="value" ビュー→コンポーネント イベントバインディング (event)="handler" コンポーネント⇔ビュー 双方向バ…

P34 Angularアプリのコンパイル/実行に必要となる設定ファイル

設定ファイル 概要 package.json Angular、またはアプリ本体で利用するライブラリ情報などを定義 tsconfig.json TypeScriptコンパイラーの動作を定義 systemjs.config.js モジュールローダー(SystemJS)の設定情報 Angularアプリケーションプログラミング作者…