モーダルを閉じる工作HardwareHub ロゴ画像

工作HardwareHubは、ロボット工作や電子工作に関する情報やモノが行き交うコミュニティサイトです。さらに詳しく

利用規約プライバシーポリシー に同意したうえでログインしてください。

工作HardwareHub ロゴ画像 (Laptop端末利用時)
工作HardwareHub ロゴ画像 (Mobile端末利用時)

AngularJS が提供するユーティリティ

モーダルを閉じる

ステッカーを選択してください

モーダルを閉じる

お支払い内容をご確認ください

購入商品
」ステッカーの表示権
メッセージ
料金
(税込)
決済方法
GooglePayマーク
決済プラットフォーム
確認事項

利用規約をご確認のうえお支払いください

※カード情報はGoogleアカウント内に保存されます。本サイトやStripeには保存されません

※記事の執筆者は購入者のユーザー名を知ることができます

※購入後のキャンセルはできません

作成日作成日
2015/07/21
最終更新最終更新
2017/11/26
記事区分記事区分
一般公開

目次

    AWSとAzureが好きです。

    0
    ステッカーを贈るとは?

    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
    詳細設定を開く/閉じる
    アカウント プロフィール画像 (本文下)

    AWSとAzureが好きです。

    記事の執筆者にステッカーを贈る

    有益な情報に対するお礼として、またはコメント欄における質問への返答に対するお礼として、 記事の読者は、執筆者に有料のステッカーを贈ることができます。

    さらに詳しく →
    ステッカーを贈る コンセプト画像

    Feedbacks

    Feedbacks コンセプト画像

      ログインするとコメントを投稿できます。

      関連記事

      • AngularJS 公式ドキュメントの利用例
        AngularJS はクライアントサイドの JavaScript フレームワークです。Angular は「角のある」という意味の英単語であり HTML のブラケットを表現しています。また随所で見られる ng というワードは発音が angular と似ているため採用されました。AngularJS の使用方法については様々な個人ブログにまとめられてはいますが、やはり公式ドキュメントが一番よくまとまって...
      • ルーティングを定義してシンプルな SPA を構築 (AngularJS)
        AngularJS は SPA (single page application) の構築をサポートしています。SPA を強制している訳ではないことに注意します。例えば SPA を構築する際に有用なモジュール ngRoute は外部モジュールとして提供されています。別途読み込みが必要です。 サンプルコード index.html <!DOCTYPE html> <html lang...
        カラフカラフ11/27/2017に更新
        いいねアイコン画像0
      • 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> <...