Angular TIPS
「Build Insider」内の連載「Angular Tips」を＠ITに移行したもの
-
Angularでルーティング機能を実装するには？ - RouterModule
RouterModuleを使用して、Angularアプリにルーティング機能を実装し、ページ内に表示する内容を動的に切り替える方法を説明します。
-
Angularで子コンポーネントから親コンポーネントに値を引き渡すには?(@Output)
@Outputデコレーターを使って、子コンポーネントで行われる処理や情報をイベント経由で親コンポーネントへ引き渡す方法を解説します。
-
Angularで親コンポーネントから子コンポーネントに値を引き渡すには?(@Input)
@Inputデコレーターを使って、親コンポーネントから子コンポーネントに情報を引き渡すことで、マスター／詳細画面を作成する方法を解説します。
-
BootstrapをAngularアプリで利用するには?(ng- bootstrap)
ng-bootstrapを使って、CSSフレームワーク「Bootstrap」の機能を、Angularのコンポーネント／ディレクティブ構文で利用する方法を解説します。
-
Angularでコンポーネントからページの「メタ情報」を操作するには?(Meta)
Metaサービスを使って、コンポーネントからページのメタ情報を操作する方法を説明します。
-
Angularでファイルをサーバーに「アップロード」するには?(HttpClientサービス)
HttpClientサービスを利用して、Angularアプリから任意のファイルをサーバーにアップロードする方法について解説します。
-
Angularでサーバーサイドと「非同期通信」するには? (HttpClientサービス)
HttpClientサービスを使ってWeb APIと非同期通信するための基本的な方法を説明します。
-
Angularで自作の「サービス」を定義するには? (@Injectableデコレーター)
既存のコンポーネントからアプリ固有のロジックをサービスとして切り出すための基本的な方法を説明します。
-
Angularで式の値によってメッセージを切り替えるには? (ngSwitch)
JavaScriptのswitch文のように、ある式を評価して、その式の値に応じて、表示するメッセージを切り替える方法を説明します。
-
Angularで「ページング」処理を実装するには?(ngFor/ slice)
ngForディレクティブとsliceパイプを使って、ページャー（＝ページングのためのリンクリスト）を実装する方法を説明します。
-
Angularで文字列によって表示を切り替えるには? (i18nSelect)
i18nSelectパイプを使って、文字列値によってテキスト表示内容を切り替える方法を説明します。
-
Angularでコンポーネント要素に属性/イベントをバインドするには?(hostパラメーター)
@Componentデコレーターのhostパラメーターを使って、コンポーネント要素そのものに属性やイベントをバインドする方法を説明します。
-
Angularでコンポーネントからページのタイトルを操作するには?(Title)
Titleサービスを使って、コンポーネントからページタイトルを設定する方法を説明します。
-
Angularでフォームに「チェックボックス」のリストを設置するには?
選択肢の中から複数を選択する「チェックボックスのリスト」を設置するための基本的な方法を解説します。
-
Angularでフォームに「ラジオボタン」のリストを設置するには?
選択肢の中から1つを選択する「ラジオボタンのリスト」を設置するための基本的な方法を解説します。
-
Angularで「フォーム」の状態を監視するには?(ngForm /ngModel)
Angularにより拡張されている標準的な＜form＞／＜input＞要素を使って、入力の有無を判定したり、サブミット済みかを判定したりと、その状態を監視する方法を説明します。
-
Angularで入カフォームに「検証」機能を実装するには? (form/input)
Angularにより拡張されている標準的な＜form＞／＜input＞要素を使って、検証機能付きの入力フォームを実装する方法を説明します。
-
Angularで複数の「スタイルプロパティ」をまとめて操作するには?(ngStyle)
ngStyleディレクティブを使って、要素に対して複数のスタイルプロパティをまとめて設定する方法を説明します。
-
Angularでコンポーネントに「スタイルシート」を適用するには?(styles/StyleUrlsパラメーター)
@Componentデコレーターのstylesパラメーターを利用してコンポーネントにスタイルシートを適用する基本的な方法を解説します。また、スタイルを外部ファイルにする方法も説明します。
-
Angularで複数の「スタイルクラス」をまとめて操作するには?(ngClass)
スタイルシートとして定義した複数の対象クラスのスタイルを、任意の要素のclass属性にまとめて着脱できるngClassディレクティブの基本的な使い方を説明します。
-
Angularで数値(単数/複数)によって表示を切り替えるには?(ngPlural)
Angularで数値によってテキスト表示内容を切り替えるための、ngPluralディレクティブの基本的な使い方を説明します。
-
Angularで「条件式」の真偽に応じて出力を切り替えるには?(ngIf/else)
与えられた条件式に基づき要素の表示／非表示を切り替えるngIfディレクティブで使う、「さもなければ」を意味するelse句と、テンプレートとして別出しするthen句の、基本的な使い方を説明します。
-
Angularで「条件式」に応じて要素を表示/非表示にするには?(ngIf)
与えられた条件式に基づき要素の表示／非表示を切り替えるngIfディレクティブの基本的な使い方を説明します。また、ngIfディレクティブによる表示／非表示の挙動の特性と注意点も示します。
-
Angularで複数の要素を「繰り返し」出力するには? (ngFor)
配列の内容を順に出力できるngForディレクティブと、ダミーのコンテナー要素を使うことで、複数の要素群をまとめて繰り返し出力する方法を説明します。
-
Angularで「配列」の内容を順に出力するには?(ngFor)
配列の内容を順に出力できるngForディレクティブの基本的な使い方を説明します。また、ngForディレクティブで利用できる特殊変数についてまとめます。
-
Angularで要素に適用する「スタイルクラス」を操作するには?(Class Binding)
スタイルシートとして定義した対象クラスのスタイルを、任意の要素のclass属性に簡単に着脱できるClass Bindingの基本的な使い方を説明します。
-
Angularで「インラインフレーム」に外部リソースをバインドするには?(Property Binding)
セキュリティの観点からデフォルトではiframeのsrc属性やobjectのdata属性にはプロパティバインディングできません。これを回避して信頼できる値としてバインディングする方法を説明します。
-
Angularで「スタイルプロパティ」に単位付きの値を設定するには?(Style Binding)
Style Bindingの「[style.スタイルプロパティ名.単位] = "式"」というバインディング構文によって、要素に対する任意のCSSスタイルプロパティに単位付きで値をバインドする方法を説明します。
-
Angularで要素の「スタイルプロパティ」を操作するには? (Style Binding)
style属性に特化したバインディング構文、Style Bindingの基本的な使い方を説明します。
-
Angularで数値を「通貨記号」付きの値に整形するには? (currency)
Angularで数値を通貨記号付きのテキスト表示に整形するための、currencyパイプの基本的な使い方を説明します。
-
Angularで数値を「パーセント形式」に整形するには? (percent)
Angularで数値を％（パーセント）形式のテキスト表示に整形するための、percentパイプの基本的な使い方を説明します。
-
Angularで数値(単数/複数)によって表示を切り替えるに(? (i18nPlural)
Angularで数値によってテキスト表示内容を切り替えるための、i18nPluralパイプの基本的な使い方を説明します。
-
Angularで「フォーム」への入力値をイベントハンドラーで受け取るには?(テンプレート参照変数)
フォーム要素への入力値をイベントとして受け取る方法として、テンプレート参照変数を利用する方法を説明します。
-
Angularのイベントハンドラーで「イベント情報」を参照するには?($event)
要素にイベントハンドラーをバインドするEvent Bindingで、その引数で得られるイベントオブジェクト「$event」から、イベントに関する詳細情報を取得する方法を説明します。
-
Angularで「フォーム」の入力値をコンポーネントと同期するには?(双方向バインディング)
テンプレート上のフォーム入力値とコンポーネントのプロパティ値を双方向にバインドするTwo-way Bindingのバインディング構文を説明し、その仕組みを紹介します。
-
Angularで「イベントハンドラー」を登録するには? (Event Binding)
要素にイベントハンドラーをバインドするEvent Bindingについて、2つのバインディング構文を説明します。
-
Angular CLIで、Angularアプリのコードを自動生成するには？
Angular CLIのng generateコマンドを使ってAngularアプリ用コードを自動生成します。また、各アプリのAngular CLI設定ファイルをエディターで編集する方法も紹介します。
-
Angular CLIとは？ ― インストール方法と、アプリの骨格生成＆実行
新規Angularアプリの作成時にAngular CLIを使うと効率的です。Angular CLIのインストール方法と、コマンド1つでAngularアプリのスケルトンを作成して、起動する方法を説明します。
-
Angularの基本構造を理解して、アプリ開発を始めるには？
初めてのAngular開発。誤解のしようもない最も基本的な“Hello World”を作成して、Angularアプリの基本構造を理解しよう。連載2本目をv4以降対応にしました。
-
人気のJavaScriptフレームワーク「Angular」の基本機能を目的別リファレンスの形式でまとめます。連載1本目をv4以降対応にしました。
-
Angularで文字列/配列から部分文字列/要素を抜き出すには?(slice)
JavaScriptのString／Arrayクラスにおけるsliceメソッドと同じように、Angularで文字列から部分文字列を抽出したり配列から特定範囲の要素を取得したりできるsliceパイプの基本的な使い方を説明します。
-
Angularで数値データに「桁区切り文字」を付与するには? (number)
Angularで数値を桁区切り文字列に整形するための、numberパイプの基本的な使い方を説明します。整数と小数点以下の桁数を指定して整形することも可能です。
-
Angularで文字列を大文字/小文字に変換するには? (lowercase/uppercase)
JavaScriptのStringクラスにおけるtoLowerCase／toUpperCaseメソッドと同じように、Angularで文字列を小文字／大文字に変換できるlowercase／uppercaseパイプの基本的な使い方を説明します。
-
AngularでJavaScriptオブジェクトをJSON形式に変換するには?(json)
JavaScriptのJSON.stringifyメソッドと同じように、AngularでJavaScriptのオブジェクトをJSON形式に変換できるjsonパイプの基本的な使い方を説明します。
-
Angularで要素の属性に値を「バインド」するには? (Attribute Binding)
HTML要素の属性に対応するプロパティではなく、属性そのものにバインディングする方法を説明します。
-
AngularでビューにHTML文書を「バインド」するには? (Property Binding)
プロパティバインディングでHTMLタグを含む文字列にバインドした場合、デフォルトでサニタイズされる挙動を確認します。逆に、意図的にサニタイズさせない方法も説明します。
-
Angularで要素オブジェクトのプロパティに値を「バインド」するには?(Property Binding)
要素のプロパティに値をバインドするProperty Bindingについて、3つのバインディング構文を説明します。
-
Angularのビューで「安全に」プロパティ/メソッドにアクセスするには?(「 ?. 」演算子)
プロパティやメソッドを呼び出す際にレシーバーオブジェクトがnullでないことを確認した上で呼び出せる「?.」演算子の基本的な使い方を解説します。
-
Angularでコンポーネントの値を「ビュー」に反映させるには?({{…}})
JavaScriptのオブジェクトをHTMLテンプレートに結び付けるための機能をデータバインドと言います。そのデータバインドを記述するためのInterpolation記法の基礎を解説します。
-
Angularでコンポーネントに適用すべき「テンプレート」を指定するには?(template/templateUrlパラメーター)
@ComponentデコレーターのtemplateパラメーターやtemplateUrlパラメーターを使って、コンポーネントにテンプレート（ビュー）を適用する方法を説明します。
-
初めてのAngular 2開発。誤解のしようもない最も基本的な“Hello World”を作成して、Angular 2アプリの基本構造を理解しよう。
-
人気のJavaScriptフレームワーク「Angular 2」の基本機能を目的別リファレンスの形式でまとめる連載がスタートしました。まずはその特徴とインストール方法を説明します。