前のセクションでは、Angular JSフレームワークを簡単に紹介します。このセクションでは、Angularのブートストラップ(ブートストラップ)とコンパイラ(コンパイル)メカニズムを継続します。
1:ブートストラップ:角度初期化
1:Angularが推奨する初期自動化は次のとおりです。
<!doctype html> <html xmlns:ng = "http://angularjs.org" ng-app> <body> ... <スクリプトsrc = "angular.js"> </body> </html
NGAPPを使用して、アプリケーションを自動的に起動する必要があるルートノードをマークします。これは通常、HTMLタグです。 DomContentLoadedイベントがAngularをトリガーすると、NGAPPがアプリケーションのルートノードとして自動的に見つかります。それが見つかった場合、次の操作が実行されます。
1。ロードモジュール(モジュール)関連指示(命令)。
2。アプリケーションインジェクター(Angularの注入メカニズム)を作成します。
3.ルートノード命令としてng-appをコンパイルして処理します。これにより、DOMノードの選択をアプリケーションルートノードとしてカスタマイズできます。
<!doctype html> <html ng-app = "optionalmodulename"> <body> add {{ +}}2:手動初期化:
初期化をより詳細に制御する場合は、Angularの自動初期化の代わりに、カスタムマニュアルブートメソッドを使用して初期化できます。たとえば、テンプレートの特定のコンテンツを変更するなど、Angularがテンプレートをコンパイルする前に何かをする必要があります。手動ブートメソッドは次のとおりです。
<!doctype html> <html xmlns:ng = "http://angularjs.org"> <body> hello {{'world'}}! {angular.bootstrap(document);}); </script> </body> </html>1.ページ上のすべてのコードがロードされたら、HTMLテンプレートルートノード(典型的なドキュメント要素)を見つけます。
2。API/Angular.BootStrap(Angular.BootStrap(Element [、Modules]))を呼び出して、テンプレートをコンパイルして実行可能にします。
2:コンパイラ:Angularの翻訳
Angularのコンピレーションメカニズムにより、開発者は新しいHTML構文をブラウザに追加できるようになり、HTMLノード、属性を追加し、カスタムノード、属性を作成することもできます。 Angularはこれらの動作をディレクティブに拡張します。Angularは有用な指示をもたらし、ドメイン固有のディレクティブを作成できます。
1:コンパイラ処理は2つのステップに分割されます。
1。DOMを変換し、指令を収集し、リンク(接続)関数を返します。
2。指示と範囲をマージして、生きているビューを生成します。スコープモードの変更はビューに反映され、ビューからのユーザーインタラクションもスコープモデルに同期され、スコープは単一のデータソースです。
2:指令コマンド
指令は、特別なHTML設計編集によって処理される行為です。名前、属性、ノードのクラス、またはHTMLコメントに配置することができます。以下は、Angular独自のNGバインドの同等の執筆方法です。
<span ng-bind = "exp"> </span> <span> </span> <ng-bind> </ng-bind> <! - directive:ng-bind exp>
ディレクティブは、DOMのAngularによって実行される関数にすぎません。以下は、スパンとdivの属性に適用できるドラッグとドロップの例です。
Angular.module( 'drag'、[])。ディレクティブ( 'draggable'、function($ document){var startx =、starty =、x =、y =; return function(scope、x =、yent){ements.css({position: 'relative'、border: 'px solid red'、backgractcolor: 'lightgrey'、 'cursor:' cursor: 'cursor:' cursor: 'lighter: (event) 'px'、左:x + 'px'})デモ
ドラッグしてどこにでも移動できます!
3:理解を見る
多くのテンプレートエンジンは、テンプレートとモデルをマージして文字列を返すように設計されており、その後、innerHTMLを使用してDOMノードに追加されます。これは、データの変更を再構成して新しいコンテンツを生成し、DOMに追加する必要があると考えられています。次の図は、一方向の結合技術に属します。
Angularは、文字列ではなく指令命令を使用しません。戻り値は、データモデルをマージするリンク関数です。ビューとモデルの拘束力は自動的で透明であり、開発者はビューを更新するために追加のアクションを追加する必要はありません。 Angularは、データモデルの結合であるだけでなく、行動の概念でもあります。双方向の結合として、形状は次のとおりです。
材料:
1. angular公式ウェブサイト:http://angularjs.org/
2。コードダウンロード:https://github.com/angular/angular.js
上記は、編集者が紹介した角度ブートストラップおよびコンパイラメカニズムです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!