AngularJS の基本的な学習ノート手順_AngularJS-jsチュートリアル-php.cn

AngularJS の基本的な学習ノート手順_AngularJS

WBOY

リリース： 2016-05-16 15:59:55

オリジナル

1040 人が閲覧しました

AngularJS はディレクティブを通じて HTML 属性を拡張します。

AngularJS ディレクティブ
AngularJS ディレクティブは、ng- プレフィックスが付いた拡張 HTML 属性です。

ng-app ディレクティブは、AngularJS アプリケーションを初期化するために使用されます。

ng-init ディレクティブは、アプリケーションデータを初期化するために使用されます。

ng-model ディレクティブは、HTML コントロール (input、select、textarea など) の値をアプリケーションデータにバインドするために使用されます。

<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>

ログイン後にコピー

ng-app ディレクティブは、そのディレクティブが配置されている

要素が AngularJS アプリケーションのルート要素、つまりスコープであることも AngularJS に伝えます。

データバインディング

上の例では、{{ firstName }} は AngularJS データバインディング式です。

AngularJS データバインディングでは、AngularJS 式は AngularJS データを使用して同期的に更新します。

{{ firstName }} は、ng-model="firstName" を通じてデータを同期的に更新します。

<div ng-app="" ng-init="quantity=1;price=5">

Quantity: <input type="number"  ng-model="quantity">
Costs:  <input type="number" ng-model="price">

Total in dollar: {{ quantity * price }}

</div>

ログイン後にコピー

注: ng-init ディレクティブの使用は、AngularJS 開発では非常に一般的です。「コントローラー」セクションでは、データを初期化するためのより良い方法が表示されます。
HTML 要素
を繰り返します ng-repeat ディレクティブは、HTML 要素を繰り返し作成するために使用されます:

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
 <ul>
  <li ng-repeat="x in names">
   {{ x }}
  </li>
 </ul>
</div>

ログイン後にコピー

オブジェクトの配列に対して ng-repeat ディレクティブを使用します。

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
 <li ng-repeat="x  in names">
  {{ x.name + ', ' + x.country }}
 </li>
</ul>

</div>

ログイン後にコピー

注: AngularJS はデータベースの CRUD (つまり、作成、読み取り、更新、削除) 操作に非常に適しています。これらのオブジェクトがデータベースから取得された場合を想像してみてください。

ng-app ディレクティブ

ng-app ディレクティブは、AngularJS アプリケーションのルート要素を定義します。

Web ページがロードされると、ng-app 命令によってアプリケーションが自動ブートストラップ (自動的に初期化) されます。つまり、AngularJS アプリケーションの実行を自動的に初期化し、ガイドします。

次の章では、ng-app ディレクティブ (ng-app="myModule" など) に値を割り当ててモジュールに関連付ける方法を学習します。

ng-init ディレクティブ
ng-init ディレクティブは、AngularJS アプリケーションの値を初期化するために使用されます。

通常、ng-init 命令を使用する必要はありません。代わりに、コントローラーまたはモジュールを使用して初期化作業を実行します。

次の章では、コントローラーとモジュールについて学習します。

ng-model ディレクティブ
ng-model ディレクティブは、HTML コントロール (input、select、textarea など) の値をアプリケーションデータにバインドするために使用されます。

ng-model ディレクティブも使用できます:

データ検証を提供します (検証番号、電子メールアドレス、必須フィールドなど)。
データのステータス (無効、ダーティ、タッチ、エラーなど) を提供します。
HTML 要素の CSS スタイルクラスを提供します。
HTML 要素を HTML フォームにバインドします。