angleJSのディレクティブとディレクティブのリスト
私たちがアプローチしたように、angularJSは、Webアプリケーションの構築に使用されるフレームワークとして知られています。つまり、アプリケーションを簡単かつ一貫して開発するのに役立つ多数の事前構築された構造を備えています。more.Directivesはの最も重要なコンポーネントの1つです。 angleJSは、基本的なHTML要素の継承を支援し、htmlインターフェイステンプレートを再利用可能にし、テストを容易にします。
Mục lục
AngularJSディレクティブの概念
ディレクティブ（ディレクティブ）は、AngularJSのコンパイル中に特定の構成が検出されたときにトリガーされる動作です。ここでangularJSHTMLコンパイラの詳細をお読みください： https ：//docs.angularjs.org/guide/compiler
次の例は、属性またはクラスを介してng-bindディレクティブを使用する2つの方法を示しています。
<!DOCTYPE html> <html lang="en" ng-app="exampleviewApp"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example View AngularJS</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-controller="mainController"> <h2>Hello {{name}}</h2> <input type="text" ng-model="name" ng-change="change()" /> <span class="ng-bind: name;"></span> </body> <script> var exampleviewApp = angular.module('exampleviewApp', []); exampleviewApp.controller('mainController', function($scope) { $scope.name = ''; $scope.length = 0; }); </script> </html>組み込みのディレクティブは通常、HTMLの属性（クラスまたはタグスタイルで記述可能）として構造化され、angularはこれらの特別な属性を認識し、これらの属性を使用すると表示されると想像できるため、Angular独自の属性に準拠する必要があります。特性と、開始文字が常にng文字であるというその原則は、ng-directivenameの例の構造に従います。ここで、directivenameは、使用するディレクティブの名前です。前の例と同様に、アプリケーションを初期化する、ディレクティブコントローラーとして宣言するには、ng-controllerを宣言するか、ng-modelを宣言するディレクティブモデルを宣言するか、データバインディングにng-bindを使用させます…
いくつかの注意：
- ng-appは常に定義する必要があり、レガシー以降のバージョンの場合は、常にng-appに名前を付けて、明示的に宣言する必要があります。
- html構造では、常に1つのng-appしかなく、他の多くのngディレクティブが存在する可能性があります。
- ディレクティブリストのドキュメント： https ：//docs.angularjs.org/api/ng/directive
マッチングディレクティブ（マッチングディレクティブ）
人気のあるAngularJSディレクティブのリスト
ng-app
ドキュメント： https ：//docs.angularjs.org/api/ng/directive/ngApp
ディレクティブng-appを宣言すると、AngularJSは、Angularアプリケーションを起動すると、これをルート要素として定義し、次に、ブートストラップと呼ばれる内部構成パラメーターを初期化することを理解します。さらに、ng-appは、アプリケーション内のさまざまなモジュールを記述するためにも使用されます。例としては、すでにデモがたくさんあるので、これ以上は説明しません。
ng-init
ドキュメント： https ：//docs.angularjs.org/api/ng/directive/ngInit
ng-model
ドキュメント： https ：//docs.angularjs.org/api/ng/directive/ngModel
input、select、textareaなどのフォーム入力タグ内のデータをコントローラーレイヤーの$ scope変数のプロパティにバインド（バインド）するために使用されるng-modelディレクティブを使用します。
ng-modelディレクティブは、次の機能の一部を提供します。
- アプリケーションのデータ型の検証を提供します（番号、電子メール、必須）
- アプリケーションデータのステータスを提供します（無効、ダーティ、タッチ、エラー）
- HTML要素のcssクラスを提供します（検証後のフォームで説明します）
- 要素のデータをHTMLフォームにバインドする
ng-repeat
ドキュメント： https ：//docs.angularjs.org/api/ng/directive/ngRepeat
ng-repeatディレクティブを使用して、配列またはオブジェクトのリストモデルがある場合に、ループしてHTML要素を反復処理できるようにします。これらは非常に便利で頻繁に使用されるディレクティブであり、純粋なJavaScriptでは不可能なHTMLで直接反復タグをサポートします。
ng-repeatの例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example ng-repeat</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="mainController"> <table> <thead> <tr> <th>Name</th> <th>Country</th> </tr> </thead> <tbody> <tr ng-repeat="item in names"> <td>{{item.name}}</td> <td>{{item.country}}</td> </tr> </tbody> </table> <ul> <li ng-repeat="item in listnotes">{{item.id}} - {{item.title}} - {{item.content}}</li> </ul> </div> </body> <script> var myApp = angular.module('myApp', []); myApp.controller('mainController', function ($scope) { $scope.names = [ { name: 'Jani', country: 'Norway' }, { name: 'Hege', country: 'Sweden' }, { name: 'Kai', country: 'Denmark' } ]; $scope.listnotes = [ {'id': 1, 'title': 'Note 1', 'content': 'Content 1'}, {'id': 2, 'title': 'Note 2', 'content': 'Content 2'}, {'id': 3, 'title': 'Note 3', 'content': 'Content 3'} ] }); </script> </html>ng-非表示/ng-表示
ng-hideがng-showであるのとは対照的に、特定の条件でHTML要素を非表示にする場合は、ng-hideを使用します。たとえば、SPAアプリケーションのマルチステップクロールの状況で役立ちます。次の例は、 ng-hideの使用例です。マルチステップのユーザーデータ収集調査を作成するため：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ng-hide/ng-show example</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="surveyApp"> <div ng-controller="mainController"> <h1>Survey Form</h1> <form name="surveyForm" ng-submit="handleSubmit()"> <div ng-hide="step1"> <div> <label>What is your name ?</label> <input type="text" ng-model="user.name" required /> </div> <div> <label>How old are you ?</label> <input type="number" placeholder="" ng-model="user.age" required /> </div> <div> <label>Do you get married ?</label> <input type="radio" ng-model="user.married" value="yes" />Yes <input type="radio" ng-model="user.married" value="no" />No </div> <div> <label>What kind of job are you doing ?</label> <select ng-model="user.job"> <option value="developer">Developer</option> <option value="teacher">Teacher</option> <option value="businessconsult">Business Consultant</option> <option value="other">Other</option> </select> </div> <button type="button" data-step="1" ng-click="nextstep($event)">Next step</button> </div> <div ng-hide="step2"> <div> <label>What is your favorite sports ?</label> <input type="text" ng-model="interest.sports" required /> </div> <div> <label>What is your favorite music ?</label> <input type="text" ng-model="interest.music" required /> </div> <div> <label>What is your favorite movies ?</label> <input type="text" ng-model="interest.movies" required /> </div> <div> <label>What is your favorite books ?</label> <input type="text" ng-model="interest.books" required /> </div> <div> <label>What is your favorite games ?</label> <input type="text" ng-model="interest.games" required /> </div> <button type="button" data-step="2" ng-click="prevstep($event)">Previous step</button> <button type="button" data-step="2" ng-click="nextstep($event)">Next step</button> </div> <div ng-hide="step3"> <div> <label>Please provide your salary ?</label> <input type="text" ng-model="finances.salary" required /> </div> <div> <label>Please provide your savings ?</label> <input type="text" ng-model="finances.savings" required /> </div> <div> <label>Please provide your investments ?</label> <input type="text" ng-model="finances.investments" required /> </div> <div> <label>Please provide your debt ?</label> <input type="text" ng-model="finances.debt" required /> </div> <button type="button" data-step="3" ng-click="prevstep($event)">Previous step</button> <button>submit form</button> </div> <div ng-hide="step4"> Thanks for your submission Let us show what you provide: <br /> Your name: {{user.name}} <br /> Your age: {{user.age}} <br /> Your job: {{user.job}} <br /> Your favorite sports: {{interest.sports}} <br /> Your favorite music: {{interest.music}} <br /> Your favorite movies: {{interest.movies}} <br /> Your favorite books: {{interest.books}} <br /> Your favorite games: {{interest.games}} <br /> Your salary: {{finances.salary}} <br /> Your savings: {{finances.savings}} <br /> Your investments: {{finances.investments}} <br /> Your debt: {{finances.debt}} <br /> Thanks for contact us ! </div> </form> </body> <script> var surveyApp = angular.module('surveyApp', []); surveyApp.controller('mainController', ($scope) => { $scope.step1 = false; $scope.step2 = true; $scope.step3 = true; $scope.step4 = true; $scope.user = { name: 'sdfsdf', age: '', married: 'no', job: 'developer', } $scope.interest = { sports: '', music: '', movies: '', books: '', games: '', } $scope.finances = { salary: 0, savings: 0, investments: 0, debt: 0, } $scope.prevstep = ($event) => { switch ($event.target.dataset.step) { default: case '2': $scope.step2 = true; $scope.step1 = false; break; case '3': $scope.step3 = true; $scope.step2 = false; break; } if ($event.target.dataset.step == 1) { } else if ($event.target.dataset.step == 2) { } } $scope.nextstep = ($event) => { switch ($event.target.dataset.step) { default: case '1': $scope.step1 = true; $scope.step2 = false; break; case '2': $scope.step2 = true; $scope.step3 = false; break; case '3': $scope.step3 = true; $scope.step4 = false; break; } if ($event.target.dataset.step == 1) { } else if ($event.target.dataset.step == 2) { } } $scope.handleSubmit = () => { // handle submit to send data to server or send email ... $scope.step3 = true; $scope.step4 = false; console.log($scope.user); console.log($scope.interest); console.log($scope.finances); } }); </script> </html>ng-include
デフォルトでは、HTMLは、あるHTMLページのコンテンツを別のHTMLページに埋め込むことができるソリューションを提供しませんが、angularJSを使用すると、この問題はng-includeディレクティブによって解決され、HTMLページを直接完全に埋め込むことができます。 HTML構造が長すぎる場合に役立つ別のファイルを小さなファイルに分割して、各コンポーネントのコードを簡単に維持および更新し、開発プロセスで発生するエラーを最小限に抑えることができます。
ng-includeの例、onload属性をトラバースするためにコントローラーからインクルードファイルにデータを渡すが、スコープに問題があるため、これは使用するのに適した方法ではありません。この状況では、カスタムディレクティブ（ディレクティブself-定義済み）これは以下でアプローチされます。
その他のドキュメントを参照してください：
ステップ1：ファイルindex.htmlを作成する
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example ng-include</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="myController"> <h1>ng-include example</h1> <div ng-include="'table.html'" onload="items = items"></div> </div> </div> </body> <script> var myApp = angular.module('myApp', []); myApp.controller('myController', function($scope) { $scope.items = [ {name: 'Jani', country: 'Norway'}, {name: 'Hege', country: 'Sweden'}, {name: 'Kai', country: 'Denmark'} ] }); </script> </html>ステップ2：ファイルtable.htmlを作成する
<table> <tr ng-repeat="item in items"> <td>{{item.name}}</td> <td>{{item.country}}</td> </tr> </table>画面に印刷した後の結果
ng-form / ng-submit
ドキュメント： https ：//docs.angularjs.org/api/ng/directive/ngForm
サーバーにデータを送信するために純粋なHTMLでフォームを作成する場合、<form>タグを使用し、 ng-submitディレクティブを介して送信イベントを処理しますが、このディレクティブのためにng-formディレクティブを使用します。スクリプトレイヤー上のngFormオブジェクト。このオブジェクトは、データ検証で使用されるプロパティを格納しますが、htmlタグを作成するときは、通常の<form>タグを作成します。これにより、angularJSのドキュメントをさらに読むことができます。送信イベントを処理するには、 ng-submitディレクティブを使用します。ここで気付く点があります。純粋なHTMLとJSを学習すると、送信後にデフォルトでWebサイトが再読み込みされますが、このng-submitは再読み込みされません。これは、前述のように、angularJSがSPAアプリケーションの構築に使用するためです。送信すると、データはリストに入れられ、ajaxリクエストを使用して、ページをリロードせずにサーバーにデータを送信します。
ng-submitと組み合わせたng-formの例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example ngform</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="mycontroller"> <form ng-submit="submit()"> <input ng-model="myForm.name" type="text" name="name" placeholder="Name"> <input ng-model="myForm.email" type="email" name="email" placeholder="Email"> <input ng-model="myForm.password" type="text" name="password" placeholder="password"> <input ng-model="myForm.confirmPassword" type="text" name="confirmpassword" placeholder="confirmpassword"> <input type="submit" value="Register"> </form> </div> </body> <script> var app = angular.module('myApp', []); app.controller('mycontroller', function($scope) { $scope.myForm = {}; $scope.myForm.name = "sdfsdf"; $scope.myForm.email = ""; $scope.myForm.password = ""; $scope.myForm.confirmPassword = ""; $scope.submit = function() { console.log($scope.myForm); // send ajax to server or database // in this case, we just save data to localstorage localStorage.setItem('listuser', JSON.stringify($scope.myForm)); } }); </script> </html>angleJSで独自のディレクティブを定義する（カスタムディレクティブ）
ドキュメント： https ：//docs.angularjs.org/guide/directive
angleJSは、アプリケーションを構築する際のほとんどの要件を満たすのに役立つ多くのディレクティブを提供しますが、ディレクティブの場合はビジネスを満たすために自己定義のディレクティブを作成できます。デフォルトは満たされていません。
起動時に.AngularJSアプリケーションは自動的に一致する要素を見つけ、カスタムディレクティブのcompile（）メソッドを使用して1回限りの操作を実行し、ディレクティブのスコープに基づいてカスタムディレクティブのlinkメソッド（）を使用して要素を処理します。例に入る前に、ディレクティブタイプの一般的な概念を理解する必要があります。
- 要素ディレクティブ-一致する要素が検出されたときに起動するディレクティブ。
- 属性-一致する属性が検出されたときに起動するディレクティブ。
- クラス（クラスディレクティブ）-一致するクラスが検出されたときに起動するディレクティブ。
- コメント（コメントディレクティブ）-一致するコメントが検出されると、ディレクティブがアクティブになります。
これらのディレクティブタイプは、ディレクティブを初期化するときに制限属性の値を指定するために使用されます：E（要素）A（属性）C（クラス）M（コメント）。通常、私たちは主にEA（要素と属性のインジケーター）を使用します。
angleJSで基本的なカスタムディレクティブを自己開始する例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example custom directive</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> <customdirective></customdirective> <div customdirective></div> <div class="customdirective"></div> </div> </body> <script> var app = angular.module('myApp', []); app.directive('customdirective', function() { return { restrict: 'EAC', template: '<h2>Hello World custom directive</h2>' }; }); app.controller('myController', function($scope) { $scope.name = ""; }); </script> </html>ブラウザに印刷したときの結果
たとえば、複数のディレクティブを使用してアプリケーションを作成すると、各ディレクティブにはプログラムの柔軟性を高めるために渡されるパラメーターが含まれます。この機能を使用すると、独自の再利用可能なHTML構造を作成でき、データは入力パラメーターに従って動的に更新されます。
ステップ1：次のようにサンプルのindex.htmlコードファイルを作成します
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example custom directive</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> <form ng-submit="handlesubmit($event)"> <div surveyform name="person1" submit="directiveSubmit"></div> </form> <form ng-submit="handlesubmit($event)"> <div surveyform name="person2"></div> </form> </div> </body> <script> var app = angular.module('myApp', []); app.controller('myController', function ($scope) { $scope.person1 = { fullname: "John", email: "abc@gmail.com", phonenumber: 1234567890 } $scope.person2 = { fullname: "Toanngo92", email: "trienkhaiweb@gmail.com", phonenumber: 2123456789 } $scope.handlesubmit = function ($event) { console.log($event); // todo here } }); app.directive('surveyform', function () { let directive = {}; directive.restrict = 'EAC'; directive.templateUrl = 'surveyForm.html'; directive.scope = { person: '=name', submit: '=' }; directive.compile = function (element, attributes) { // console.log(element); element.css("border", "1px solid #cccccc"); element.css("padding", "10px"); //linkFunction is linked with each element with scope to get the element specific data. var linkFunction = function ($scope, element, attributes) { } return linkFunction; } return directive; }); </script> </html>ステップ2：以下の構造でsurveyForm.htmlファイルを作成します
<label>fullname</label> <br /> <input type="text" ng-model="person.fullname" /> <br /> <label>Email</label> <br /> <input type="text" ng-model="person.email" /> <br /> <label>Phone</label> <br /> <input type="number" ng-model="person.phonenumber" /> <br /> <button type="submit">submit</button>ブラウザに印刷したときの結果：
2つのhtmlフォームを書き直さずに再利用でき、2つのフォームが同じ構造を実行し、2つの別々のモデルを使用していることがわかります。
これでディレクティブの基本概念は終わりです。実際、学習プロセスでデフォルトのディレクティブを使用するだけで十分な場合は、多くのコンポーネントを再利用する必要がある複雑なプロジェクトでそれらを使用できます。ソリューションはカスタムディレクティブを適用して解決します。
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
