AngularJSアプリケーション開発ガイド 第7章 その他の便利な機能 その3

AngularJSアプリケーション開発ガイド

cookie

AngularJSには$cookieと$cookieStoreというcookieを扱うためのサービスが用意されている。$cookieを使えばcookieに関する操作は全て行えるが、ほとんどの場合$cookieを直接扱う必要はない。

例えばcookieから検索履歴を取り出す場合、$cookieStoreを使うと以下のように書ける。

var pastSearches = $cookieStore.get('myapp.past.searched');

国際化とローカライズ

AngularJSで国際化とローカライズを行うには、以下の3ステップを行う。

  1. index.htmlの変更:AngularJSでは、サポートするロケール毎に個別のindex.htmlが必要とされる。
  2. ローカライズされたファイルの生成:サポートされるロケール毎にangular.jsを作成する。
  3. ローカライズ規則の読み込み:ローカライズされたindex.htmlがローカライズされたangular.jsを読み込むようにする。

考慮すべき点

  • 文字列の長さ
  • タイムゾーン

HTMLのサニタイズ

デフォルトの状態のAngularJSでは、HTMLのコンテンツをデータバインディングしようとするとエスケープされた上で表示される。

コンテンツをHTMLとして表示したい場合にあh、ng-bind-htmlディレクティブが利用できる。これは、ngSanitizeモジュールに含まれており、angular-sanitize.jsを読み込む必要がある。ng-bind-htmlでは、cssやjavascriptのコードは除去される。

本当にそのまま表示させたい場合には、ng-bind-html-unsafeディレクティブを使う。

linkyフィルタ

URLをリンクに変換するフィルタ。

// コントローラ
$scope.contents = 'URLを含む文字列 http://example.com';
<!-- テンプレート -->
<div ng-bind-html="contents | linky"></div>

URL部分にaタグが適用された状態で表示される。

コメントをどうぞ

コメントを残す