AngularJS TIPS
AngularJSのディレクティブを単体テストするには?
テスティングフレームワーク「Karma+Jasmin」を使って、AngularJSの「ディレクティブ」の単体テストを記述し、それを実行する方法を解説する。
AngularJS TIPS
自作ディレクティブの挙動を定義するには?(controller/controllerAs/bindToControllerプロパティ)
テンプレートに基づき出力されるHTMLコードの内容を、イベントハンドラーなどを活用して動的に切り替えるために、コントローラー付きの独自ディレクティブを作成する方法を説明する。
AngularJS TIPS
自作ディレクティブの属性にAngular式や関数を設定するには?(scopeプロパティ)
自作ディレクティブ呼び出し側で指定した「属性の値(Angular式や関数)」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。
AngularJS TIPS
ディレクティブで属性を設定するには?(scopeプロパティ)
自作ディレクティブ呼び出し側で指定した「属性の値(文字列)」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。
AngularJS TIPS
ディレクティブ配下のコンテンツをテンプレートに反映させるには?(transcludeプロパティ)
自作ディレクティブ呼び出し側で指定した「配下のコンテンツ」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。
AngularJS TIPS
ディレクティブで利用するテンプレートを外部ファイル化するには?(templateUrlプロパティ)
ビューの操作/生成を定義した自作ディレクティブのテンプレートを外部ファイル化して利用する方法を解説。また、ビューの中で<script>要素としてテンプレートを宣言する方法も説明する。
AngularJS TIPS
ディレクティブを自作するには?(directiveメソッド)
AngularJSで、ビューの操作/生成を独立させて独自ディレクティブを作成する基本的な定義方法と使用例を説明する。
AngularJS TIPS
AngularJSのコントローラーを単体テストするには?
テスティングフレームワーク「Karma+Jasmin」を使って、AngularJSの「コントローラー」の単体テストを記述し、それを実行する方法を解説する。
AngularJS TIPS
AngularJSのサービスを単体テストするには?
テスティングフレームワーク「Karma+Jasmin」を使って、AngularJSの「サービス」の単体テストを記述し、それを実行する方法を解説する。
AngularJS TIPS
AngularJSアプリの単体テストを実施するには?(実行編)
テスティングフレームワーク「Karma+Jasmin」を使って、AngularJSアプリの単体テストを記述して、それをテスト実行するまでの手順を説明する。
AngularJS TIPS
AngularJSアプリの単体テストを実施するには?(準備編)
AngularJSで一般的に採用されているテスティングフレームワーク「Karma+Jasmin」による単体テスト環境を構築する手順を説明する。
AngularJS TIPS
パラメーター付きのサービスを定義するには?(providerメソッド)
value/service/factoryメソッドに比べてより原始的なproviderメソッドの利用場面を紹介し、使い分け指針をまとめる。またproviderメソッドを使ってサービスを定義する方法を解説する。
AngularJS TIPS
アプリ内でよく利用するビジネスロジックを定義するには?(factoryメソッド)
より実践的なアプリ開発を行うために、アプリ固有のビジネスロジックをfactoryメソッドによりサービスとして切り出し、それを呼び出す方法を説明する。
AngularJS TIPS
アプリ内でよく利用するビジネスロジックを定義するには?(serviceメソッド)
より実践的なアプリ開発を行うために、アプリ固有のビジネスロジックをserviceメソッドによりサービスとして切り出し、それを呼び出す方法を説明する。
AngularJS TIPS
複数のコントローラー間で共有すべき値を管理するには?(constantメソッド)
より実践的なアプリ開発を行うためにアプリ固有の処理ロジック(今回はconstantメソッドにより管理する「値」)をサービスとして切り出し、それを呼び出す方法を説明する。
AngularJS TIPS
複数のコントローラー間で共有すべき値を管理するには?(valueメソッド)
より実践的なアプリ開発を行うためにアプリ固有の処理ロジック(今回はvalueメソッドにより管理する「値」)をサービスとして切り出し、それを呼び出す方法を説明する。
AngularJS TIPS
日付/時刻値を入力する際にタイムゾーンを加味するには?(ng-model-options)
ng-model-optionsディレクティブにtimezoneパラメーターを指定することで、タイムゾーンによる時差を加味した日時を<input>要素から取得する方法を説明する。
AngularJS TIPS
モデルへの入出力に際して処理を介するには?(ng-model-options)
入力フォームとモデルをバインドした際に、独自のゲッター/セッター関数を仲介させることで、そのモデルに出し入れする値を検証/加工する方法を説明する。
AngularJS TIPS
不正な入力値もモデルに反映させるには?(ng-model-options)
入力フォームに検証機能を付けた場合、デフォルトでは不正値はモデルに反映されない。この制限を回避して反映させる方法を説明する。
AngularJS TIPS
画像を動的に生成するには?(ng-src/ng-srcset)
<img>タグのng-src属性に指定する画像リソースのURLをAngularJSのスコープオブジェクト経由で完成させることで、動的に画像を表示する方法を説明する。
AngularJS TIPS
モデルをバインドするテンプレートを指定するには?(ng-bind-template)
AngularJSのディレクティブであるng-bind-template属性を使って、{{...}}エクスプレッションを含むテンプレートをビューにバインドする方法を説明する。
AngularJS TIPS
$injectorサービスでサービスの取得/存在確認を行うには?($injector)
AngularJSの管理外でサービスを手動でインスタンス化して利用できる$injectorサービスの応用的な活用方法として、has/get/instantiateメソッドを解説する。
AngularJS TIPS
AngularJSの管理外でサービスを注入するには?($injector)
AngularJSの管理外でも、$injectorサービスを使ってサービスを手動でインスタンス化することで、AngularJSが提供するサービスを利用できる。その基本的な利用方法を説明する。
AngularJS TIPS
複数のオブジェクトを結合するには?(extend/merge)
angular.extendメソッドを利用して、既存の複数のオブジェクトを結合する方法と注意事項を解説。また、入れ子になったオブジェクトを再帰的にマージする方法も説明する。
AngularJS TIPS
コンテンツ・セキュリティ・ポリシーを利用する(ng-csp)
セキュリティフレームワーク「CSP」による制限ポリシーを有効にした場合に、AngularJSでは特定のケースでエラーとなる。そのケースの内容と回避方法を解説する。
AngularJS TIPS
配列/オブジェクトをコピーするには?(copy)
配列のコピーで、JavaScript標準のconcatメソッドを使う場合とAngularJSのcopyメソッドを使う場合の違いを説明。シャローコピーとディープコピーとは?
AngularJS TIPS
ルーティングの挙動/設定をカスタマイズするには?($routeProviderプロバイダー)
「テンプレートを文字列で指定(templateパラメーター)」「リダイレクト時の規則をカスタマイズ(redirectToパラメーター)」「html5モードに切り替える」という、特によく使われる3つのカスタマイズ方法を取り上げる。
AngularJS TIPS
URL経由でパラメーター情報を引き渡すには?($routeProviderプロバイダー)
ngRouteモジュールを使ったAngularJSのルーティングで、URL経由でパラメーター情報を引き渡す方法を解説する。
AngularJS TIPS
ルーティング機能を実装するには?($routeProviderプロバイダー)
AngularJSではngRouteモジュールを利用したルーティングが可能だ。その基本的な用法(ルーティングの定義/コントローラー/テンプレートなど)について解説する。
AngularJS TIPS
AngularJSを手動で起動するには?(bootstrap)
通常は自動起動するAngularJSを手動で起動するにはangular.bootstrapメソッドを使用する。その基本的な使い方を解説。
AngularJS TIPS
thisキーワードの参照先を固定するには?(bindメソッド)
分脈により変換する「this」。その問題を解消するangular.bindメソッドの基本的な使い方を解説する。
AngularJS TIPS
既存のフィルターを利用して新たなフィルターを定義するには?($filterサービス)
既存フィルターの機能を活用する独自のフィルターを作成するための基本的な手順を解説。サンプルとしてbyte単位の数値をMbyte単位に変換するmegaByteフィルターを作成する。
AngularJS TIPS
パラメーターを持ったフィルターを定義するには?(filter/identity/noopメソッド)
独自のパラメーター付きフィルターを作成するための基本的な手順を説明。サンプルとしてmapフィルターを作成し、これを使って配列の数値の2乗を計算してみる。
AngularJS TIPS
フィルターを自作するには?(filterメソッド)
独自のフィルターを作成するための基本的な手順を説明する。サンプルとして文字列の前後にある空白を除去するtrimフィルターを作成する。
AngularJS TIPS
AngularJSアプリでjQueryを利用するには?(element/ng-jq)
HTML DOMツリーを直接操作したい場合に、標準のjqLiteではなく、高機能なjQueryを使う方法を解説。常にjqLiteにする方法や、jQueryバージョンを固定する方法も説明する。
AngularJS TIPS
AngularJSで文書ツリーを操作するには?(element)
AngularJSでは非推奨だが、特殊な事情でHTML DOMツリーを直接操作したい場合には、angular.elementメソッドを使用する。その基本的な使い方を説明する。
AngularJS TIPS
アプリ共通の例外処理を実装するには?($exceptionHandler)
アプリ内でキャッチされなかった例外を最終的に処理するAngularJSの$exceptionHandlerサービス。その挙動を上書きして、独自の処理を実施する方法を紹介する。
AngularJS TIPS
$cookiesサービスを利用する際の注意点とは?($cookies)
AngularJSのクッキー機能は1.3から1.4で大きく変更された。具体的に何が変わったかを解説。また、アプリ全体で共通のクッキーオプションを設定する方法も説明する。
AngularJS TIPS
クッキーを読み書きするには?($cookies)
AngularJSが提供する機能を利用してクッキーを読み/書き/削除する方法を解説。また、登録済みの全てのクッキー情報をまとめて取得する方法も説明する。
AngularJS TIPS
指定された時間の経過で処理を実行するには?($interval/$timeout)
ミリ秒単位で処理を実行できる、いわゆる「タイマー」である$intervalサービスの基本的な使い方を解説。また、一定時間後に処理を実行する$timeoutサービスについても説明する。
AngularJS TIPS
JSON形式のWeb APIにアクセスするには?($http)
Web APIと通信する際に問題となるクロスドメイン制約を回避するために使われるテクニック「JSONP」を、AngularJSで実現するための基本的な方法を説明する。
AngularJS TIPS
サーバーサイドとHTTP POSTで非同期通信するには?($http)
AngularJSでHTTP POSTで非同期通信する方法を説明。また、送信データをJSONではなくjQuery形式にする方法や、PHPでJSONデータをデコードする方法も紹介する。
AngularJS TIPS
サーバーサイドと非同期通信するには?($http)
AngularJSでサーバーサイドのWeb APIと非同期通信する方法を説明。また、ログの種類や、ショートカットメソッドについても紹介する。
AngularJS TIPS
ログをコンソールに出力するには?($log)
AngularJSで開発者ツールのコンソールにログを出力する方法を説明。また、ログの種類や、デバッグログの表示/非表示の切り替え方法も紹介する。
AngularJS TIPS
ng-repeat要素でさまざまな繰り返しを表現するには?(ng-repeat)
ng-repeatディレクティブの応用的な使い方として、「重複した値を含んだ配列」「ハッシュ(連想配列)」「複数の要素セット」の内容を順に処理して出力する方法を説明。
AngularJS TIPS
交互に異なるスタイルクラスを適用するには?(ng-class-odd/ng-class-even)
ng-class-even/ng-class-oddディレクティブを使って、表の行などの繰り返しデータの偶数行もしくは奇数行に対し、スタイルを設定・変更する方法を説明する。
AngularJS TIPS
要素のスタイルクラスを操作するには?(ng-class)
スタイル定義をスタイルシートに分離したうえで、ng-classディレクティブを使って要素のクラス属性によりスタイルを設定・変更する方法を説明する。
AngularJS TIPS
配列からm~n件目の要素を取り出すには?(limitTo)
limitToフィルターを使って、配列の先頭から指定された件数だけ要素を取り出す方法を説明。応用例としてページング処理を実装する。
AngularJS TIPS
数値(単数/複数)によって表示を切り替えるには?(ng-plurlize)
ng-plurizeディレクティブやngMessageFormatモジュールを使うことで、変数の値によってメッセージ内容を切り替える方法を説明する。
AngularJS TIPS
式の値によって表示を切り替えるには?(ng-switch)
ng-switchディレクティブを使って、与えられた式の値に応じて、表示すべきコンテンツを切り替える方法を説明する。
AngularJS TIPS
JavaScriptオブジェクトをJSON形式に変換するには?(json)
jsonフィルターを使って、JavaScriptオブジェクトをJSON形式に変換する方法を説明する。
AngularJS TIPS
自作の検索条件/比較ルールで配列を検索するには?(filter)
任意の条件で配列を絞り込むためのフィルターである「filter」の応用的な使い方として、検索条件や比較ルールをカスタマイズする方法を解説する。
AngularJS TIPS
配列の内容をフィルターするには?(filter)
任意の条件で配列を絞り込むためのフィルターである「filter」の基本的な使い方を解説。否定や完全一致などさまざまな条件でのフィルタリング方法も紹介する。
AngularJS TIPS
独自の規則で配列をソートするには?(orderBy)
独自の並べ替え規則を使って、配列の内容の並べ替える方法を解説。逆順や、複数キーの指定に独自のソートルールを使う方法も紹介する。
AngularJS TIPS
数値データに桁区切り文字を付けるには?(number/currency)
数値データを、ロケール別の桁区切り文字列に整形したり、ロケール別の通貨記号を付加したりして出力する方法を説明する。
AngularJS TIPS
文字列を大文字/小文字に変換するには?(lowercase/uppercase)
lowercase/uppercaseフィルターを使って文字列を大文字や小文字に変換する方法を解説。また、JavaScriptコードから変換する場合に使える$filterサービスとangular.lowercase/angular.uppercaseメソッドについても紹介する。
AngularJS TIPS
入力値のモデルへの反映タイミングを変更するには?(ng-model-options)
AngularJSのデータバインディング機能により入力値がモデルに反映されるのを、指定したミリ秒数後やフォーカスが外れたときまで遅延させる方法を説明する。
AngularJS TIPS
別ファイルやJavaScriptでメッセージを管理するには?(ng-message-include/ng-message-exp)
ng-messages属性で使用するメッセージを、ページ内でテンプレート化したり、外部ファイル化したりして効率的に管理する方法を説明する。
AngularJS TIPS
式の真偽に応じて表示を切り替えるには?(ng-messages/ng-message)
条件式の値に応じてメッセージの表示/非表示を切り替えるために(例えばエラー時にメッセージ表示するなど)、ng-messages/ng-message属性を使用する方法を解説する。
AngularJS TIPS
URL/メールアドレスからハイパーリンクを生成するには?(linky)
URL/メールアドレスの文字列データをアンカータグによるリンクに整形できるlinkyフィルターの基本的な使い方を説明する。
AngularJS TIPS
入力された区切り文字を配列に変換するには?(ng-list)
テキストボックスへの入力値を特定の区切り文字で分割して文字列の配列に変換するために、ng-list属性を使用する方法を解説する。
AngularJS TIPS
要素の表示/非表示を切り替えるには?(ng-show/ng-hide/ng-open)
真偽条件に応じて要素の表示/非表示を切り替えるために、ng-show/ng-hide属性を使用する方法を解説する。また、<details>要素の表示/非表示を切り替えるng-open属性の使い方も紹介する。
AngularJS TIPS
ハイパーリンクを動的に生成するには?(ng-href)
スコープオブジェクト経由で動的に生成したハイパーリンクのURL設定が適切に処理されるように、ng-href属性を使用する方法を解説する。
AngularJS TIPS
イベントリスナーを登録するには?(ng-clickなど)
AngularJSで、ディレクティブを使ってイベントリスナーを設定する方法を解説。また、イベントリスナーにイベントオブジェクトを渡して参照する方法も説明する。
AngularJS TIPS
ビューにHTML文書をバインドするには?(ng-bind-html)
文字列をデータバインドした際に、標準で実施されるサニタイズ処理について紹介。また、サニタイズせずにHTMLのままのビューに反映させる方法も説明する。
AngularJS TIPS
モデルをビューにバインドするには?(ng-bind/ng-cloak)
エクスプレッションが一瞬表示されてしまう不具合を解消して、AngularJSの双方向データバインディングを実現する方法を説明する。
AngularJS TIPS
モデルをテキストボックスなどのフォーム要素にバインドするには?(ng-model)
ビューの変更をモデルに反映させ、逆にモデルの変更をビューに反映させる、AngularJSの双方向データバインディングの基本を解説する。デフォルト値の設定方法も説明。
AngularJS TIPS
AngularJSでコントローラーを定義するには?
AngularJSアプリの最も基本的な構成要素である「コントローラー」の基礎として、コントローラー経由でスコープを準備し、テンプレートに反映させる方法を説明する。
今、人気のJSライブラリ[ジャンル別に比較]
人気上昇中のJavaScriptライブラリを調べてみた【2015年版】
altJSの人気が混戦で面白い! 2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表。
AngularJS TIPS
AngularJSを利用するには?
クライアントサイド開発でも、本格的なアプリケーションフレームワークを利用しよう。世界中で人気爆発中のAngularJSの基本機能を目的別リファレンスの形式でまとめる連載スタート。
Monaca入門:Onsen UI+AngularJSで作るハイブリッドモバイルアプリ(6)
AngularJSの方法でMonacaアプリを作ってみよう(後編)
Monacaアプリ開発実践編の第3弾(連載最終回)。路線名を選択して、時刻表を表示するアプリの作成方法を説明する。
Monaca入門:Onsen UI+AngularJSで作るハイブリッドモバイルアプリ(5)
AngularJSの方法でMonacaアプリを作ってみよう(中編)
Monacaアプリ開発実践編の第2弾。Web APIを使ってバス停の座標データを取得するアプリの作成手順を解説する。
Monaca入門:Onsen UI+AngularJSで作るハイブリッドモバイルアプリ(4)
AngularJSの方法でMonacaアプリを作ってみよう(前編)
実践的なMonacaアプリ開発の一例として、オープンデータのWebサービスを使ったアプリの作成方法を説明する。Monacaアプリ開発実践編の第1弾。
Monaca入門:Onsen UI+AngularJSで作るハイブリッドモバイルアプリ(3)
Onsen UIの舞台裏で働くAngularJSの世界
AngularJS流のデータ/コントローラー/表示の実装方法と、AngularJSのディレクティブによるHTML要素の操作方法、データの追加、AngularJS機能のサービスについて解説する。
Build Insider Survey【2014年4月実施】
今、本当に人気がある「JavaScriptライブラリ&ツール」を調べてみた
Web制作者/開発者が「今後、使いたい」JavaScriptライブラリおよびWeb技術を、ランキング形式で発表。2014年度前半はこれらを押さえよう。
Build Insider Survey (in April 2014)
We surveyed the most popular developer technology in Japan
The popularity rankings of development-technologies which developers want to use in the future.
今、人気のJSライブラリ【2014年版】
人気上昇中のJavaScriptライブラリを調べてみた[ジャンル別に比較]
2013年中に人気が急上昇してきており、「2014年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表。
第1回 Build Insider OFFLINE
3つのMVC系人気フレームワーク、Backbone.js/AngularJS/Knockout.js [スライド&動画]
それぞれのJavaScriptフレームワークに詳しい3人の講師が、30分ずつ、フレームの概要や基本的な使い方を紹介。その後の10分ほどで、それぞれの講師への質疑応答や、それぞれのフレームワークの機能比較や意見交換を行うパネルディスカッションを実施。
書籍転載:JavaScriptライブラリ実践活用[厳選111]
[AngularJS]HTMLそのものをテンプレートとして動的な表示を実現する
書籍転載の5本目(書籍内の番号は「70」)。HTMLとJavaScriptをシンプルに分離できる、LiteなJavaScriptフレームワークである「AngularJS」の基礎と基本的な使い方を紹介。