仕様変更があった機能
仕様変更があり、推奨されない機能となったものや、または、既存のコードに多少の変更が必要になってしまった機能を紹介します。
ngCookies - 新しいクッキー管理
バージョン1.3までは$cookiesと$cookieStoreがありましたが、$cookieStoreが、今後利用が推奨されないようになり、$cookiesサービスを使うことになりました。
ただし、$cookieStoreはそのまま利用可能ですので、$cookieStoreを使ってクッキーを制御している方は現在のところ変更の対応は必要ないでしょう。
また新しい$cookiesサービスは、これまでの$cookieStoreと同じような使い方ができるのはもちろん、クッキーの保存の際に有効期限や、Secureなどのオプション指定ができるようになりました。これにより高度なWebセキュリティを保つことができるようになったので大変助かる方もいるのではないかと思います。
新しい$cookiesサービスの使い方はリスト6のようになります。
module.controller('Cookie14Controller',['$scope','$cookies',function($scope,$cookies){
// : (省略)
// (1) 単純な値の取得と保存
var uid = $cookies.get('tmp_id');
if(!uid) {
uid = "123456";
$cookies.put('tmp_id', uid);
}
// (2) オブジェクト形式の取得と保存
var getObj = $cookies.getObject('key');
var obj = {
key : 'sample'
};
$cookies.putObject('key',obj);
var opts = $cookies.get('opts');
console.log(opts);
// (3) クッキー保存時にオプションを指定
$cookies.put('opts','value',{
path : '/',
expires : new Date(2015,7,1)
// secure : false,
// domain : 'www.coltware.com'
});
// (4) 保存してあるクッキーの値をすべて取得する方法
console.log($cookies.getAll());
}]);
（1）ではget/putメソッドを用いて単純なクッキーの値を扱っています。続いて（2）ではオブジェクト形式の値の管理ですが、バージョン1.4からはgetObject/putObjectを使うようになりました。
内部ではJSON形式でのシリアライズ処理をしています。putObjectメソッドで設定した値をgetメソッドで取得するとJSON形式の文字列になってしまいます。（3）ではクッキーの値の保存時にオプションを指定しています。オブションには、path、expires（有効期限）、secure（SSL時の扱い）、domainの4つが指定可能です。（4）のようにクッキーに保存されている値を一度に取得するメソッドも追加されています。
ngMessages - 分割可能なメッセージテンプレートと変数を使った一致条件の指定
ngMessagesモジュールでng-messages-include属性を利用している場合に、バージョン1.3までのコードでは動作しなくなってしまいました。具体的にはng-message-include属性がng-messageディレクティブのオプションではなくなり、独立したディレクティブになります。このため、リスト7のように変更する必要があります。
// 1.3での記述方法
<div ng-messages="errors" ng-messages-multiple ng-messages-include="err-messages" class="errors">
// 1.4での記述方法
<div ng-messages="errors" ng-messages-multiple class="errors">
<div ng-messages-include="err-messages"></div>
</div>
この変更により、ngMessagesディレクティブは複数のngMessagesIncludeを持つことができるようになったので、メッセージ定義を分割して管理できるようになりました。
また、新たな機能としては、ngMessageExpディレクティブが追加されました。ngMessageディレクティブでは文字列の指定でしたが、変数などの表現で指定できるようになりました。
<div ng-init="pref = {tokyo : true}; val = 'tokyo'"></div>
<div ng-messages="pref">
現在地は「
<span ng-message-exp="val">東京都</span>
<span ng-message-exp="'okinawa'">沖縄県</span>
」です
</div>
ngRepeat/ngOptionsでの表示順が指定した順番に変更
ngRepeatやngOptionsでオブジェクトを指定すると、これまでは自動的にプロパティ名でソートされてしまいました。多くの方にとって、これはあまり望ましい仕様ではなかったとは思いますが、これらの機能に頼っていた方は注意が必要です。
例えば、リスト9のようなオブジェクトをngRepeat/ngOptionsに指定すると図2に示すようにkey1、key2、key3の順番で表示されてしまっていましたが、今後は指定した順番で表示されるようになり直感的になりました。
// repeat/app.jsの抜粋
$scope.map = {
key3 : 'value3',
key2 : 'value2',
key1 : 'value1'
};
// repeat/index.htmlの抜粋
<ul>
<li ng-repeat="(key, value) in map">{{key}}={{value}}</li>
</ul>
最後に
今回紹介しきれなかったものがいくつかありますので、CHANGELOGや1.3から1.4へのマイグレーション方法などを参照することをおすすめします。
今回はマイナーバージョンアップと言うことで、多少の既存コードに影響がありますが、それよりも、このようにバージョンアップが重ねられていることにより、ユーザニーズに即した機能が追加されることの方が受ける恩恵は大きいと思います。また、1.4と同時にリリースされる予定であるngNewRouterは、今回紹介できませんでしたが、Angular 2を想定した作りになっているようです。AngularJS 2はJavaScriptそのものの拡張までも考慮された意欲的なフレームワークを目指しているようで、JavaScriptの今後に興味がある方ならば、このようなAngularJSが目指すべき方向性がどうなるのかも興味があるところでしょう。
