NG-BIND ディレクティブを使用して ANGULARJS_AngularJS で一方向バインディングを実装する例

この記事では、AngularJS フレームワークを簡単に紹介した後、例を使用して {{}} 補間メソッドと ng-bind ディレクティブの使用方法を示します。

フロントエンド開発を強化および簡素化する単なるクラス ライブラリである jquery とは異なり、angularjs は完全な Web フロントエンド フレームワークであるため、学習曲線ははるかに長くなります。

Angularjs は Java の Spring フレームワークに似ているように思えます。これは中心的なコンテナーの位置にあり、その組み込みコンポーネントの多くはすでに一般的なシナリオに対応でき、フレームワークに従って拡張できます。アイデア。

最も基本的な内容から始めましょう:

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

<頭>

文字列リテラル値を直接出力

こんにちは{{"世界"}}

---

プレースホルダーを使用して変数を出力する

こんにちは{{挨拶}}

---

ng-bind ディレクティブを使用して変数を出力する

こんにちは

---

<スクリプト>
関数 HelloController($scope) {
$scope.greeting = "世界";
}

ng-app は angularjs モジュールを宣言し、HTML タグの宣言の範囲に限定されます。

ng-controller はモジュール内で angularjs コントローラーを宣言します。複数のコントローラーを使用できますが、コンテキストは分離されているため、コントローラーのスコープは可能な限り狭くする必要があります。

{{}} は angularjs の補間構文で、JSP の EL 式 ${} に似ています。最初の出力は、「World」がリテラル値であり、プログラムがそれを直接出力するためです。2 番目の出力は、greeting がコントローラーで定義された変数であるため、その変数に対応する値も出力されます。 World; 3 番目の出力 angularjs の組み込み ng-bind 属性ディレクティブが使用されます。最終結果は {{}} と同等ですが、ディレクティブ = の後に文字列が続くことに注意してください。

js の HelloController は、本体の命令に対応します。入力パラメータ $scope は、フレームワークによって提供されるサービスであり、他の同様のサービスが自動的に挿入されます。それらについては後で学びます。メソッド本体には 1 行しかなく、$scope 上の変数を定義します。これは HTML コードで参照される変数です。

この記事は非常に簡単で、コードをコピーするだけで実行できます。 angular.min.js は 1.2 ブランチの最新バージョンであることに注意してください。同じコードはバージョン 1.3.0 では実行できません。これは、1.3.0 が最終リリース バージョンではないことに関連している可能性があります。