Angularjs の基本を始める_AngularJS-jsチュートリアル-php.cn

Angularjs の基本を始める_AngularJS

WBOY

リリース： 2016-05-16 16:24:17

オリジナル

1119 人が閲覧しました

これについては、実は誰をターゲットにしてどこから書けばいいのか分からないので、ここからは単純な考え方で書き始めます

1.angular.element
2.angular.Bootstrap

ng-app がノードに適用されると、Angular がノードを自動的に初期化することはよくわかっています。初期化プロセスは次のステップに分かれています。

1. Angular はドキュメントのロード中に自動的に初期化され、最初に ng-app 命令で指定されたノードを見つけます。
2. ロードモジュール関連命令
3. アプリケーションに関連するインジェクター (依存関係マネージャー) を作成します
4. 指定した ng-app をルートノードとして使用して、Dom

のコンパイルを開始します。

次に、自分で初期化して、ng-app コマンドと同等のものを作成しましょう。 angular.element は、元の DOM 要素または HTML 文字列を jQuery 要素としてラップするラッパーです。 angular.Bootstrap はスクリプトを手動で初期化できます。このスクリプトの初期化にはこれら 2 つを使用します

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

<頭>

ブートストラップマニュアル

これは ng-app の外です~~{{1 2}}

これは ng-app 内です~~~ {{1 2}}

<スクリプトタイプ="text/javascript">
angular.element(document).ready(function() {
angular.bootstrap(angular.element(document.getElementById("widuu")));
});

2.コンパイラ

angularjs の公式ドキュメントは、ngApp、ngModule、ngBind など、すべてキャメルケース命名法であることがわかります。これらは、HTML コンパイラーを使用して要素の属性とタグを独自に定義できるようになります。動作はディレクティブと呼ばれます。
公式ドキュメントではコンパイラについて次のように説明されています

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

コンパイラ
コンパイラーは、DOM を走査して属性を検索する Angular サービスです。コンパイルプロセスは 2 つのフェーズで行われます。

コンパイル: DOM を走査し、すべてのディレクティブを収集します。結果はリンク関数です。

リンク: ディレクティブをスコープと組み合わせてライブビューを作成します。スコープモデルの変更はすべてビューに反映され、ビューに対するユーザーの操作はスコープモデルに反映されます。真実の情報源。

ng-repeat などの一部のディレクティブは、コレクション内の項目ごとに DOM 要素を 1 回クローンします。コンパイルとリンクのフェーズがあると、クローン作成されたテンプレートを 1 回コンパイルし、クローンインスタンスごとに 1 回リンクするだけで済むため、パフォーマンスが向上します。

コンパイラは Angular のサービスであり、DOM ノードの走査と属性の検索を担当し、コンパイルは 2 つの段階に分かれています。

1. コンパイル: ノードを走査し、すべてのディレクティブを収集し、リンク関数を返します

2. リンク: ディレクティブをスコープにバインドし、ライブビューを作成します。スコープ内の変更はすべてビューに反映され (ビューの更新)、テンプレート上のユーザーアクティビティ (変更) はスコープモデルに反映されます (双方向バインディング)。これにより、スコープモデルに正しい値が反映されるようになります。
ng-repeat などの一部のディレクティブは、コレクション内の要素ごとに特定の要素 (組み合わせ) を 1 回コピーします。コンパイルとリンクの 2 つの段階により、パフォーマンスが向上します。クローンされたテンプレートは、コレクション内の要素ごとに 1 回コンパイルしてリンクするだけで済むためです (テンプレートのキャッシュと同様)。

3. 独自のディレクティブを段階的に作成します

1. ディレクティブを理解する

まず、ディレクティブは ngModule などのキャメルケースの名前に従っていることを理解してください。コンパイルすると、たとえば
のように一致します。

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

<入力データ-ng:model="foo">

ディレクティブは、接頭辞として x- または data- を使用でき、以下に示すように、:、-、または _ などの区切り文字を使用してキャメルケースの命名方法を変換できます。

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

通常、ngBind に対応するために ng-bind を使用します。この形式は

$compile は要素名、属性、クラス名、コメントに基づいてディレクティブを照合できます

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

コンパイルプロセス中に、コンパイラーは $interpolate サービスを通じてテキストおよび属性に埋め込まれた式 ({{something}} など) を照合します。これらの式はウォッチとして登録され、ダイジェストサイクルの一部として更新されます。以下は単純な補間です:

こんにちは、{{ユーザー名}}!

2. コンパイル手順

HTML の「コンパイル」の 3 つのステップ:

1. まず、ブラウザの標準 API を使用して HTML を DOM オブジェクトに変換します。これは重要なステップです。テンプレートは解析可能な (仕様に準拠した) HTML でなければならないためです。これは、一般に DOM 要素ではなく文字列に基づくほとんどのテンプレートシステムと比較できます。

2. DOM のコンパイルは、$comple() メソッドを呼び出すことで完了します。このメソッドは DOM を走査し、ディレクティブと一致します。一致が成功すると、対応する DOM とともにディレクティブリストに追加されます。指定された DOM に関連付けられたすべてのディレクティブが識別される限り、ディレクティブは優先度によってソートされ、そのcompile() 関数がこの順序で実行されます。ディレクティブのコンパイル関数には DOM 構造を変更する機会があり、link() 関数の解析を生成します。 $compile() メソッドは、すべてのディレクティブ独自のコンパイル関数によって返されるリンク関数のコレクションである結合リンク関数を返します。
3. 前の手順で返されたリンク関数を使用して、テンプレートをスコープに接続します。これにより、ディレクティブ自体のリンク関数が呼び出され、要素にいくつかのリスナーを登録し、スコープと連動していくつかの監視をセットアップできるようになります。その結果、スコープと DOM の間の双方向の即時バインディングが実現します。スコープが変更されると、DOM は対応する応答を取得します。

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

var $compile = ... // コードに挿入されます

var スコープ = ...;

var html = '
';

// ステップ 1: HTML を DOM 要素に解析します

var template = angular.element(html);

// ステップ 2: テンプレートをコンパイルします

var linkFn = $compile(template);

// ステップ 3: コンパイルされたテンプレートをスコープにリンクします。

linkFn(スコープ);

ngAttr 属性バインディング

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

今日はこれで終わりです。明日からディレクティブの作成と作成を開始します ~~~ この章には多くの主要な概念があるので、長くなりすぎないようにしてください~~~