AngularJSに近づく-カスタムコマンドの作成

12845 ワード

AngularJSシリーズに連れて行きます.

AngularJS-基本機能紹介

AngularJS-体験指令インスタンス

に連れて行きます

AngularJS-カスタム命令

を作成する
------------------------------------------------------------------------------------------------
なぜAngularJS命令を使うのですか?
AngularJSを使ったことがある方が一番興味があるのはそのコマンドです.現在の市場のフロントエンドフレームワークもAngularJSだけがカスタム命令の機能を持っており、AngularJSは現在Webアプリケーションの多重化能力を提供する唯一のフレームワークである.
現在、多くのJavaScript製品がWeb開発者にプラグインを提供しています.たとえば、Bootstrapは、現在流行しているスタイルとJavaScriptプラグインを提供するフロントエンド開発ツールパッケージです.しかし、開発者はBooostrapのプラグインを使用する場合、JavaScriptモードに切り替えてjQueryコードを書いてプラグインをアクティブにする必要があります.jQueryコードは書くのは簡単ですが、HTMLと同期しなければなりません.これは単調で退屈でエラーが発生しやすいプロセスです.
AngularJSのホームページには、BootstrapのTab機能を実現するための簡単な例が示されており、ページにTab機能を簡単に追加でき、使用方法はulラベルと同じように簡単です.HTMLコードは次のとおりです.

<body ng-app="components"> 
  <h3>BootStrap Tab Component</h3> 
  <tabs> 
    <pane title="First Tab"> 
      <div>This is the content of the first tab.</div> 
    </pane> 
    <pane title="Second Tab"> 
      <div>This is the content of the second tab.</div> 
    </pane> 
  </tabs> 
</body>

JavaScriptコードは次のとおりです.

angular.module('components', []). 
  directive('tabs', function() { 
    return { 
      restrict: 'E', 
      transclude: true, 
      scope: {}, 
      controller: [ "$scope", function($scope) { 
        var panes = $scope.panes = []; 
  
        $scope.select = function(pane) { 
          angular.forEach(panes, function(pane) { 
            pane.selected = false; 
          }); 
          pane.selected = true; 
        } 
  
        this.addPane = function(pane) { 
          if (panes.length == 0) $scope.select(pane); 
          panes.push(pane); 
        } 
      }], 
      template: 
        '<div class="tabbable">' + 
          '<ul class="nav nav-tabs">' + 
            '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+ 
              '<a href="" ng-click="select(pane)">{{pane.title}}</a>' + 
            '</li>' + 
          '</ul>' + 
          '<div class="tab-content" ng-transclude></div>' + 
        '</div>', 
      replace: true 
    }; 
  }). 
  directive('pane', function() { 
    return { 
      require: '^tabs', 
      restrict: 'E', 
      transclude: true, 
      scope: { title: '@' }, 
      link: function(scope, element, attrs, tabsCtrl) { 
        tabsCtrl.addPane(scope); 
      }, 
      template: 
        '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' + 
        '</div>', 
      replace: true 
    }; 
  })

次のリンクから効果を確認できます.http://jsfiddle.net/powertoolsteam/GBE7N/1/
ご覧のように、コマンドを実装するためのとのラベルを持っている以外は、ページと通常のHTMLページには違いはありません.HTML開発者はコードを書く必要はありません.もちろん、最初にカニを食べる人が必要で、コマンド共有を作成する必要がありますが、現在、Tabsコマンドはよく見られ、BootStrap、jQueryUI、Wijmo、有名なフロントエンドプラグインセットなど、どこでも多重化できます.
命令の使いやすさと書きやすいため,多くのユーザがAngularJSを用いて命令を書き始めた.例えば、AngularJS開発グループは、Bootstrapの代わりにAngularJSに基づいて一連の命令−UI Bootstrapを実現している.有名なComponentOneコントロールメーカーもAngularJSに基づいてWijmoを作成した.GitHubでは、jQueryUI widgetsという共通命令リポジトリを見つけることもできます.
AngularJSを持っていて、自分が巨人の肩に立っていると思っているのではないでしょうか.しかし、あまり早く喜ばないでください.もしこんなに多くの命令が私たちに使われていたら、私たちはどうしてAngularJSを勉強しなければなりませんか.どうしてカスタム命令を勉強しなければなりませんか.
簡単な例を挙げると、特別なニーズがあるかもしれません.財務会社で働いている場合は、データを表形式で表示し、バインド、編集、検証、サーバへのデータ更新を同期する機能を持つ財務フォームを作成する必要があります.フォーム・プラグインは一般的ですが、これらの具体的なニーズを満たすことができるかどうかはわかりません.そのため、実際のビジネスニーズに基づいてカスタム・コマンドを作成する必要があります.

<body ng-app="abcFinance"> 
  <h3>Offshore Investment Summary</h3> 
  <abc-investment-form 
    customer="currentCustomer" 
    country="currentCountry"> 
  </abc-investment-form data> 
</body>

これが本論文の目的であり,次にAngularJS命令の作成方法について議論する.

カスタムAngularJS命令の作成
文章の冒頭のカスタムコマンドは非常に簡単です.同期機能のみを実現します.一般的な命令は、より多くの要素を含んでいます.

//       (        ) 
var m = angular.module("myApp");

//   "my-dir"   
myApp.directive("myDir", function() { 
  return { 
    restrict: "E",        //         (    ) 
    scope: {              //        scope 
      name: "@",          // name     （   ，    ） 
      amount: "=",        // amount     （    ） 
      save: "&"           //      
    }, 
    template:             //   HTML (  scope    ) 
      "<div>" + 
      "  {{name}}: <input ng-model='amount' />" + 
      "  <button ng-click='save()'>Save</button>" + 
      "</div>", 
    replace: true,        //            
    transclude: false,    //      HTML   
    controller: [ "$scope", function ($scope) { …  }], 
    link: function (scope, element, attrs, controller) {…} 
  } 
});

効果は次のとおりです.
このカスタムコマンドは、名前空間に似た「my」を接頭辞とするフォーマットに従うため、アプリケーションで複数のモジュールコマンドを参照すると、接頭辞でどのように定義されているかを簡単に判断できます.これは無理な要求ではありませんが、このようにすると多くの便利さをもたらすことができます.
コマンドのコンストラクション関数は、属性を持つJavaScriptオブジェクトを返します.これらの内容はAngularJSのホームページで明確に説明されています.以下に、いくつかのプロパティについて説明します.

restrict:HTMLでの命令の適用形態を説明します.「A」、「E」、および「C」が用意されています.「M」は、attribute、element、classおよびcomment(デフォルトは「A」です).attributes-UI要素の作成方法に注目します.

scope:命令の役割範囲を作成し、scopeは命令の中で属性ラベルとして渡されます.Scopeは多重化可能な命令を作成するために必要な条件であり、各命令(ネストされた命令のどのレベルにあっても)には親scopeに依存しない一意の役割ドメインがある.scopeオブジェクトはnamesとtypes変数を定義する.上記の例では3つのscope変数が作成されている.

name:"@"(値転送、一方向バインド):"@"記号は変数が値転送であることを示します.命令は親scopeから渡された文字列の値を取得します.命令はこの値を使用できますが変更できません.最も一般的な変数です.

amount:"="(参照、双方向バインド)"="記号は、変数が参照伝達であることを示します.命令は、プライマリScopeの参照値を取得します.値は、複合オブジェクトおよび配列を含む任意のタイプであってもよいです.命令は、親Scopeの値を変更することができるので、命令が親Scopeの値を変更する必要がある場合に使用する必要があります.

save:"&"(式)"&"記号は、変数が親Scopeで有効な式であることを示します.これにより、コマンドは修正値よりも高度な操作を実現できます.

template:元のテンプレートのタグに代わる文字列.[置換](Replace)機能を使用すると、すべての古い要素が新しい値に置き換えられます.注意templateはScopeで定義された変数をどのように使用するかに注意してください.これにより、追加のコードを書く必要がなくmacro-styleスタイルコマンドを作成できます.replace:元のタグの値を置換するか、元のタグの値を追加するかを説明します.デフォルト値はfalseです.元のタグは保持されます.

transclude:カスタムコマンドが元のタグの内容をコピーするかどうかを示します.たとえば、tab要素には他のHTML要素が含まれているため、以前に示した「tab」コマンドはtranscludeをtrueに設定しました.「dateInput」コマンドは初期化時に空にする必要があるため、transcludeをfalseに設定する必要があります.

link:この方法は命令において重要な役割を果たしている.DOM操作の実行やイベントリスナーの登録などを担当します.linkメソッドには、

のパラメータが含まれます.

scope:コマンドScopeの参照.scope変数は初期化時に定義されず、linkメソッドはモニタ監視値変化イベントを登録します.

element:命令を含むDOM要素の参照.linkメソッドは一般的にjQueryによってインスタンスを操作する(jQueryがロードされていない場合はAngular's jqLiteも使用できる).

controller:ネストされた命令がある場合に使用します.このパラメータは、子命令の参照を親命令に提供し、命令間のインタラクションを許可する役割を果たし、tab命令はこのパラメータを使用する典型的な例である.http://jsfiddle.net/powertoolsteam/GBE7N/1/

linkメソッドを呼び出すと、値による転送("@")のscope変数は初期化されず、コマンドのライフサイクル内の別の時点で初期化されます.このイベントをリスニングする必要がある場合はscope.$watchメソッド.以上、カスタムコマンドについては、基本的な知識の説明が必要です.命令に慣れていない場合は、fiddleで実践できるいくつかの小さな例を実装することが最善の方法です.http://jsfiddle.net/powertoolsteam/Tk92U/

次の記事では、いくつかのAngularJSカスタムコマンドについて説明します.

ElasticSearchのちょっとしたコマンド集

Linux下c++フォルダ内のファイルおよび絶対パスの読み取り