AngularJSフレームワークを簡単に導入した後、この記事では、例を使用して、{{{}}補間法とNGバインド命令の使用を実証します。
フロントエンドの開発を強化および簡素化するクラスライブラリであるJQueryとは異なり、AngularJSは完全なWebフロントエンドフレームワークであるため、学習曲線ははるかに高くなっています。
Angularjsは、それがJavaのSpringフレームワークに似ているという感覚を与えてくれます。組み込みのコンポーネントの多くは、すでに一般的なシナリオを満たすことができ、フレームワークのアイデアに従って特別なシナリオを拡張できます。
最も基本的なコンテンツから始めましょう。
コードコピーは次のとおりです。
<！doctype html>
<html ng-app>
<head>
<メタcharset = "utf-8">
<title> ng-bindディレクティブ</title>
</head>
<body ng-controller = "hellocontroller">
<div>
<p>直接出力文字列リテラル</p>
こんにちは世界"}}
<hr>
</div>
<div>
<p>プレースホルダーを使用して変数を出力します</p>
こんにちは{{挨拶}}
<hr>
</div>
<div>
<p> ng-bind命令を使用して変数を出力します</p>
こんにちは<span ng-bind = "グリーティング"> </span>
<hr>
</div>
<スクリプトsrc = "../ lib/angularjs/1.2.26/angular.min.js"> </scrip>
<スクリプト>
関数hellocontroller（$ scope）{
$ scope.greeting = "world";
}
</script>
</body>
</html>
NG-APPはAngularJSモジュールを宣言し、HTMLタグを宣言する範囲に限定されます。
NG-Controllerは、モジュール内のAngularJSを宣言するコントローラーです。コントローラーには複数のコントローラーを持つことができますが、コンテキストは分離されており、コントローラーの範囲を可能な限り狭くする必要があります。
{{}}は、JSPのEL式$ {}と同様のAngularJSの補間構文です。最初の出力は、「世界」が文字通りの価値であり、プログラムが直接出力されるためです。 2番目の出力は、挨拶がコントローラーで定義されている変数であるため、変数の対応する値も出力であり、これも世界です。 3番目の出力では、AngularJSに組み込まれたNG-Bind属性命令を使用し、最終結果は{{{}}に相当しますが、命令=の後に文字列が続くことに注意してください。
JSのHellocontrollerは、身体に関する指示に対応しています。エントリパラメーター$スコープは、フレームワークによって提供されるサービスであり、現在のコントローラーのコンテキストを表しており、他の同様のサービスがあります。フレームワークは自動的に注入され、後でゆっくりと理解します。メソッド本体には1つの行のみがあり、$スコープ上の変数を定義します。これは、HTMLコードで参照される変数です。
この記事は非常にシンプルで、コピーした後にコードを実行できます。 Angular.min.jsは、1.2ブランチの最新バージョンであることに注意してください。同じコードが1.3.0バージョンで実行できません。理由は不明です。 1.3.0が最終リリースバージョンではない可能性があります。