AngularJS HTML コンパイラの概要_AngularJS

概要

AngularJS の HTML コンパイラーにより、ブラウザーは新しい HTML 構文を認識できるようになります。これにより、動作を HTML 要素または属性に関連付けることができ、カスタム動作を持つ新しい要素を作成することもできます。 AngularJS では、この動作拡張を「ディレクティブ」と呼びます

HTML には、静的ページを作成するときに形式を制御するための宣言構造が多数あります。たとえば、コンテンツの一部を中央に配置したい場合、ブラウザに「ウィンドウの中点を見つけてコンテンツの中央と結合する」ように指示する必要はありません。コンテンツを中央揃えにする必要がある要素に align="center" 属性を追加するだけです。これが宣言型言語の威力です。

しかし、宣言型言語にも制限があります。その理由の 1 つは、宣言型言語を使用してブラウザーに新しい構文を認識させることができないことです。たとえば、コンテンツを中央に配置するのではなく、左 1/3 に配置することはできません。したがって、ブラウザが新しい HTML 構文を学習する方法が必要です。

AngularJS には、APP を作成するための非常に役立つ手順がいくつか付属しています。また、独自のアプリケーションに役立つ独自のコマンドを作成できることを願っています。これらの拡張命令は、APP を作成するための「ドメイン固有言語」です。

コンパイル プロセスはブラウザ側で行われ、サーバー側はどのステップにも関与せず、事前コンパイルも行われません。

コンパイラ

コンパイラは、AngularJS によって提供されるサービスであり、DOM を走査してそれに関連するプロパティを検索します。コンパイル プロセス全体は 2 つの段階に分かれています。

1. コンパイル: DOM を走査し、関連する命令をすべて収集してリンク関数を生成します。

2. リンク: スコープを命令にバインドし、動的ビューを生成します。スコープ モデルへの変更はすべてビューに反映され、ビュー上のユーザー操作もスコープ モデルに反映されます。これにより、ビジネス ロジックで考慮する必要があるのはスコープ モデルだけになります。

ng-repeat など、データ コレクション内の各 DOM 要素のクローンを作成する命令がいくつかあります。コンパイル プロセス全体をコンパイルとリンクの 2 つの段階に分割すると、クローン テンプレートを合計で 1 回コンパイルしてそれぞれのモデル インスタンスにリンクするだけで済むため、全体的なパフォーマンスが向上します。

コマンド

ディレクティブは、「関連する HTML 構造がコンパイル段階に入ったときに何をすべきか」を示します。指示は要素名、属性、CSS クラス名、またはコメントに記述できます。以下に、同じ機能を持つ ng-bind ディレクティブの使用例をいくつか示します。

コードをコピーします コードは次のとおりです:

ディレクティブは、本質的には、コンパイラーが関連する DOM にコンパイルするときに実行する必要がある単なる関数です。コマンド API ドキュメントで、コマンドに関する詳細情報を見つけることができます。

これは要素をドラッグ可能にするコマンドです。 要素の draggable 属性に注目してください。

index.html:

コードをコピーします コードは次のとおりです:

<頭>
<スクリプト src="http://code.angularjs.org/angular-1.1.0.min.js">
<スクリプト src="script.js">


ドラッグ ME

script.js:

コードをコピー コードは次のとおりです:

angular.module('drag', []).
directive('draggable', function($document) {
    var startX=0、startY=0、x = 0、y = 0;
    return function(scope, element, attr) {
      element.css({
       位置: '相対'、
       境界線: '1px 赤一色',
       背景色: 'ライトグレー'、
       カーソル: 'ポインター'
      });
      element.bind('mousedown', function(event) {
        startX = events.screenX - x;
        startY = イベント.screenY - y;
        $document.bind('mousemove', Mousemove);
        $document.bind('マウスアップ', マウスアップ);
      });

function Mousemove(event) {
        y = イベント.screenY - startY;
        x = イベント.screenX - startX;
        element.css({
          上: y 'px',
          左: x 'px'
        });
      }

function Mouseup() {
        $document.unbind('mousemove', Mousemove);
        $document.unbind('マウスアップ', マウスアップ);
      }
    }
 });

ドラッグ可能なプロパティを追加することで、どの HTML 要素でもこの新しい動作を実現できます。このような変更の利点は、ブラウザの新しい機能にあります。

これは、新しい方法を新しい方法として認識する能力を最大限に活用するものです。

理解ビデオ

ネットワーク上には非常に多くのモジュール システムがあります。そのほとんどは、「静的に文字モジュールとデータを決定し、新しい文字を生成し、その後内部 HTML を介してページ要素に挿入する」というものです。

これは、データ上の変更を意味し、都市はデータを更新し、モデルを結合して新しい文字を生成し、DOM に再挿入する必要があります。

は、ユーザーの入力を必要とし、更新プロセス全体を手動で管理する必要があり、リッチな形式を削減します。

AngularJS とは異なり、AngularJS エディターは文字列モジュールではなくバンドル命令の DOM を使用します。返されるのは接続関数であり、この関数とアクション フィールド モデルが組み合わされて 1 つのアニメーション ビューが生成されます。さらに、Angular の命令は、インナー HTML を使用せず、ユーザーの入力を上書きすることもありません。文字列形式の定義を使用し、行を示す構造体も使用できます。

AngularJS の宣言は、「固定された DOM」を生成する可能性があります。これは、データ モデルを定義する DOM 要素の例が、定められた存続期間中に変更されないことを意味します。

の例を参照してイベントに注目しますが、この参照はモジュールとデータの結合時に失われる可能性があります。