Anglar.jsのコマンド——分かりやすく、全解析
2890 ワード
angular.js , 。angular.js ng HTML 。 ng-app、ng-model , 。
angglar.jsにおける基本的な命令は以下の内容を含む.・1.ng-ap/ng-model
ng-appコマンドは、アングラー、jsの役割範囲を宣言するために使用され、ng-modelはモデルを宣言するために使用されます.これらは前にもう詳しく紹介しました.
2.ng-nit
このコマンドはモジュールの初期化を行うために使用されます.一番簡単な使用方法はこのコマンドを利用してデータ初期化を行います.コードは以下の通りです.
: {{ cost }}
上記コードでは、ng-initを用いてcost変数の値を初期化し、その後、{}}(anglar中のデータバインディング方式の一つ)を用いて呼び出します.しかし、このようなデータ初期化の方式は推奨されていません.3.ng-bind
この命令はデーターバインディングに使用できます.その機能は前に述べた{}と同じです.下記のコードの中で、私達は「{}方式ではなく、ng-bindコマンドによってデータバインディングを行います.コードは以下の通りです.
:
4.ng-repearng-repeat命令は、繰り返し出力を行うために使用され、配列を巡回するために一般的に使用されます.コード例は以下の通りです.
:
-
{{ x.name + ', ' + x.country }}
ここではnames内のすべての徐オブジェクトを遍歴し、それぞれ規定のテンプレートに従って出力します.php中のforeach文と似ています.x in namesは、names配列の各オブジェクトをxに値付けし、出力し、配列が巡回されるまで、この動作を一回実行しないことを表しています.以上はAnglarJSで予め定義されている命令です.私たちはangglar.jsの中で自分で命令の定義を行うことができます.directive方法を使う必要があります.簡単な命令定義コードは以下の通りです.
var app = angular.module("myApp", []);
app.directive("hello", function() {
return {
template : " !"//tempate
};
});
上のコードの中で私達はハローコマンドを定義しています.templateはこのコマンドのテンプレートを定義しています.つまり、私達はこのコマンドを使う時、htmlの中でどのような内容が現れる必要がありますか?コマンドを定義すれば、前のように呼び出すことができます.上记のコマンドの呼び出しは、html属性としてのコールのみを提供しています.実はangglar.jsには4つのコマンドの呼び出し方法があります.これらはそれぞれ、要素名の呼び出し、属性呼び出し、クラス名の呼び出し、および注釈呼び出しです.それらの形式は以下の通りです.
アングラーでは、これらの4つの呼び出しをより明確に示すために、それぞれの呼び出しは英語のアルファベットの表示を設定しています.コマンド定義時にそれらの呼び出し方式を限定するために、それぞれ:E元素名のみ使用可能です.
A属性のみの使用
Cクラス名のみ使用可能です.
Mはコメントのみの使用となります.
以下の例では、命令を定義する際にこれらの制限をどのように使うかを説明しています.
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : " !"
};
});
もちろん、これらの識別は一緒に使用することもでき、デフォルトのrestictはEAであり、要素名の呼び出しまたは属性呼び出しが可能であることを示している.