AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchで内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ
-
基本、仕組み
- Angular2のモジュール、コンポーネント、bootstrapの概要
- データバインディングの概要
- プロパティバインディングとアトリビュートバインディング
- イベント処理
- NgClass、NgStyle、クラスバインディング、スタイルバインディングを使ってcss設定
- 内挿（interpolation）、２Wayバインディングの概要
- NgForを使ってリストやテーブルを作成
- NgSwitchで内部にあるHTMLテンプレートの表示を切り替え
- NgIf、[style.display]、[hidden]を使って表示、非表示を切り替え
- inputs、@Inputを使ってディレクティブ間で値を受け渡し
- outputs、@Output、EventEmitterを使ってカスタムイベントを定義
- カスタム構造ディレクティブ作成
- NgForを使ってラジオボタン、selectメニューを作成
- フォームのバリデーションチェック、動的にCSS追加
- カスタムバリデート、カスタムフォーム
- フォームで非同期のバリデート、入力値の変更検知
- サービスの概要、サービスを使ったサンプル作成
- Promiseを使って非同期にデータを取得
- ビルトインパイプ
- カスタムパイプでソート（orderBy）機能のサンプル作成
- Bootstrap3を使ってページング
- ステートフル、非同期パイプの使用方法
- HTTPでサーバーからJSONデータ取得
- HTTP POST送信
- Observableを使ってHTTPリクエストを複数送信
- JSONPを使ってサーバー通信
- ルーティング設定、RESTのサンプル作成
- Angular2でNavigationEndイベントを使ってflashメッセージ表示
- ルーターの遅延ロード（AsyncRoute）とrouterCanDeactivateの使用方法
- Angular2とBootstrap4でAccordion
- Angular2とBootstrap4でCarousel
- Angular2とBootstrap4でドロップダウン
- Angular2とBootstrap4でツールチップ、ポップオーバー
- Angular2とBootstrap4でタブ
- Angular2とBootstrap4でページネーション（ページャー）
ディレクティブ
フォーム
サービス
パイプ
HTTP
ルーティング
Bootstrapと連携
- WordPressでAngularJSを使ったGoogleマップを使えるようにする
- google-mapディレクティブを使って地図を表示
- 地図上に複数のマーカーを表示する
- マーカーをクリックして情報ウィンドウを表示
- マーカーでイベントを処理
- 重複して表示されるマーカーをクラスター化する方法
- 交通レイヤを表示する方法
- ルートサービスを使って簡単な徒歩ルートを表示する
- 経由地を指定して徒歩ルートを表示する
- ルート計算の結果をテキストでも表示する
- ドラッグ可能なルートを表示し、結果をテキストでも表示
- ルートサービスで表示するルートの線の色、太さを設定する方法
- Fusionテーブルのデータを地図上にマーカーとして表示
- 逆ジオコーディングで地図上クリックで住所を表示
- ジオコーディングを使って入力した住所にマーカーを表示
- 地図とストリートビューを並べて表示
- クリックした地点のストリートビューを表示
- 地図上にGoogleアドセンスの広告を表示
- パノラミオ（Panoramio）の写真を表示
- パノラミオ（Panoramio）の写真をタグでフィルタして表示
- プレイスライブラリで店や施設を表示（１）nearbySearch
- プレイスライブラリで店や施設を表示（２）テキスト検索
- プレイスライブラリで店や施設を表示（３）詳細情報表示
- 地図に独自のスタイルを設定
- 地図上にラインを表示
- プレイスライブラリで店や施設を表示（４）オートコンプリート