概要

AngularJS では JavaScript の言語仕様として不足のある汎用的な処理を補うためにユーティリティが提供されています。代表的なものをコード例とともに列挙します。公式ドキュメントはこちらです。

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="angular.min.js"></script>
</head>
<body>

ここにサンプルコードを記述。

</body>
</html>

イテレーション

<script>
 angular.forEach([1,2,3], function(value, i){
   console.log(i + ': ' + value);
 });

 angular.forEach({prop1:1,prop2:2}, function(value, key){
   console.log(key + ': ' + value);
 });

 var list = [];
 angular.forEach([1,2,3], function(value, i){
   this.push(value); // 'this' is 'list'
 }, list);
 console.log(list);
</script>

型判定

<script>
 console.log(angular.isArray([1,2,3]));
</script>

その他に以下のようなものが提供されています。

angular.isDate
angular.isDefined
angular.isElement
angular.isFunction
angular.isNumber
angular.isObject
angular.isString
angular.isUndefined

オブジェクトのマージ

<script>
 var containerObj = { prop1: 1 };
 var itemObj = { prop2: 2 };

 angular.extend(containerObj, itemObj);
 console.log(containerObj); //=> Object { prop1=1, prop2=2 }
</script>

オブジェクト同士の比較

<script>
 var obj1 = {prop1:1};
 var obj2 = {prop1:1};
 console.log(angular.equals(obj1, obj2)); //=> true
</script>

オブジェクトのコピー

ディープコピーが行われます。参照先が共通のものになることはありません。

<script>
 var obj = {prop1:1};
 var copied = angular.copy(obj);

 obj.prop1 = -1;
 console.log(obj.prop1); //=> -1
 console.log(copied.prop1); //=> 1
</script>

オブジェクトと JSON 文字列の相互変換

<script>
 var obj = {prop1:1,prop2:2};
 console.log(angular.toJson(obj, false));
 console.log(angular.toJson(obj, true)); // 改行などで整形

 var jsonStr = '{"prop1":1,"prop2":2}';
 console.log(angular.fromJson(jsonStr));
</script>

大文字小文字変換

<script>
 console.log(angular.uppercase('abc'));
 console.log(angular.lowercase('ABC'));
</script>

フォームバリデーション

novalidate を指定することによって HTML5 のバリデーション機能を無効化します。

<form name="myForm" novalidate>

  <input type="text" name="myInput"
         ng-model="sample.myInput"
         ng-minlength="4"
         ng-maxlength="10"
         ng-pattern="/^[a-zA-Z0-9_]+$/"
         ng-required="true">
  <span ng-show="myForm.myInput.$error.minlength">4 文字以上であることが必要です</span>
  <span ng-show="myForm.myInput.$error.maxlength">10 文字以下であることが必要です</span>
  <span ng-show="myForm.myInput.$error.pattern">半角英数字のみ使用できます</span>
  <span ng-show="myForm.myInput.$error.required">必須項目です</span>

  <button type="submit" ng-disabled="myForm.$invalid">実行</button>
</form>

$valid, $invalid, $error の他に以下のものが使用できます。

$pristine ロード直後で一度も入力値に変更がない場合に true
$dirty 一度でも入力値が変化したことがあれば true

jQuery / jqLite の利用

AngularJS では DOM 操作を目的として jQuery の機能制限版である jqLite オブジェクトが提供されています。

<div id="myid"></div>

<script>
 /* jqLite オブジェクト */
 var selected = angular.element(document.getElementById('myid'));
 var created = angular.element('<div>CREATED</div>');

 /* jQuery のような API */
 selected.text('hello world').css('background-color', 'yellow');
 selected.append(created);
</script>

jqLite では機能が不足してしまう場合は jQuery を AngularJS よりも前に読み込みます。angular.element で返されるオブジェクトが jqLite ではなく jQuery となります。ただし jQuery 2 系には対応していません。

<script src="angular.min.js"></script>
↓
<script src="jquery-1.11.3.min.js"></script>
<script src="angular.min.js"></script>