作成日
最終更新
記事区分
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>
0
関連記事
- AngularJS 公式ドキュメントの利用例AngularJS はクライアントサイドの JavaScript フレームワークです。Angular は「角のある」という意味の英単語であり HTML のブラケットを表現しています。また随所で見られる ng というワードは発音が angular と似ているため採用されました。AngularJS の使用方法については様々な個人ブログにまとめられてはいますが、やはり公式ドキュメントが一番よくまとまって...
- ルーティングを定義してシンプルな SPA を構築 (AngularJS)AngularJS は SPA (single page application) の構築をサポートしています。SPA を強制している訳ではないことに注意します。例えば SPA を構築する際に有用なモジュール ngRoute は外部モジュールとして提供されています。別途読み込みが必要です。 サンプルコード index.html <!DOCTYPE html> <html lang...
- DOM 操作ディレクティブ (AngularJS)AngularJS のビルトインディレクティブのうち DOM 操作に関するものを、コード例とともに列挙します。公式ドキュメントはこちらです。 DOM 操作ディレクティブ <!DOCTYPE html> <html lang="ja" ng-app> <head> <meta charset="utf-8"> <script type="...
- フィルター (AngularJS)AngularJS にはモデルの値を表示用に変換するフィルタという機能があります。コマンドラインにおけるパイプのように使用します。公式ドキュメントはこちらです。 フィルターの使用例 <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <meta charset="utf-8"> <...
- HTTP 通信 (AngularJS)AngularJS における HTTP 通信では、XMLHttpRequest オブジェクトが利用されています。AngularJS で HTTP 通信を行うためのサンプルコードを以下に示します。公式ページはこちらです。 index.html <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <...
