AngularJS ディレクティブ: ng-init、ng-app、ng-model、ng-repeat

AngularJS のディレクティブとは何ですか?

A 指令 AngularJS の `ng-model` は、HTML に新しい機能を追加するコマンドです。AngularJS が HTML コードを解析する際、まずページ内のディレクティブを検出し、それに応じて HTML ページを解析します。以前の章で説明した AngularJS ディレクティブの簡単な例として、「ng-model ディレクティブ」があります。このディレクティブは、データ モデルをビューにバインドするために使用されます。

注意： コントローラーがなくても、ng-init、ng-repeat、ng-model ディレクティブを使用して、HTML ページに基本的な AngularJS コードを記述できます。これらのディレクティブのロジックは、AngularJS ファイルで提供されます。 Googleコントローラーは、ビジネスロジックを可能にする次のレベルのAngularJSプログラミング構造ですが、前述のとおり、アプリケーションがAngularJSアプリケーションであるためにコントローラーを持つことは必須ではありません。

しかし、ブラウザはどのようにしてそれを実行するようになるのでしょうか？

AngularJSディレクティブがHTMLでどのように機能するか

序論で定義したように、AngularJS ディレクティブは、 HTMLページが読み込まれると、AngularJSコンパイラはDOMを走査し、各要素を登録済みのディレクティブと照合し、見つかった動作を関連付けます。

AngularJS には数十個の組み込みディレクティブに加え、自分で登録したディレクティブも同梱されています。以下で説明する ng-app、ng-init、ng-model、ng-repeat の 4 つのディレクティブは、初心者が最初に目にするものです。これらの例の前に、ディレクティブの記述方法 4 つについて説明しておきます。

AngularJSディレクティブにはどのような4つの種類がありますか？

ディレクティブは必ずしも属性ではありません。AngularJSコンパイラは要素名、属性、クラス名、コメントでディレクティブを照合でき、各ディレクティブは、そのディレクティブが受け入れる形式を宣言します。 restrict プロパティ。デフォルトは EAしたがって、特に指定しない限り、要素構文と属性構文の両方が機能します。独自のディレクティブを作成する場合は、値が最も重要になります。なぜなら、コンパイラは、restrict 値によって除外される形式を無視するからです。

💡 ヒント： 要素と属性の構文を推奨します。 公式AngularJSディレクティブリファレンス クラス形式とコメント形式は、従来のオプションとして扱われます。以下の例はすべて属性構文を使用しています。

AngularJS の ng-app

これはAngularJSアプリケーションを初期化するために使用されます。このディレクティブがHTMLページに配置されている場合、基本的にAngularJSに対して、このHTMLページがAngularJSアプリケーションであることを伝えます。

ng-appの例

以下の例は、通常のHTMLアプリケーションをAngularJSアプリケーションに変換する方法を示しています。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="">

    Tutorial Name : {{ "Angular" + "JS"}}

</div>

</body>
</html>

⚠️ 警告： リストにはオリジナルが残っています chrset="UTF 8"公開されたとおりです。正しい属性は charset="UTF-8".

Code 説明：

1. 「ng-app」ディレクティブは、このアプリケーションがAngularJSアプリケーションであることを示すために、divタグに追加されます。なお、ng-appディレクティブはどのタグにも適用できるため、bodyタグにも使用できます。
2. このアプリケーションをAngularJSアプリケーションとして定義したため、AngularJSの機能を利用できるようになりました。今回の例では、式を使って2つの文字列を単純に連結しています。

コードが正常に実行されると、以下の出力が表示されます。

出力：

出力には式の出力が明確に示されていますが、これはアプリケーションをAngularJSアプリケーションとして定義したからこそ可能になったことです。次のディレクティブがそのデータを提供します。

AngularJS の ng-init

これはアプリケーションデータの初期化に使用されます。アプリケーションによってはローカルデータが必要になる場合があり、そのような場合はng-initディレクティブを使用できます。

ng-initの例

この例では、ng-init ディレクティブを使用して「TutorialName」という変数を作成し、その変数の値をページに表示します。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="TutorialName='Angular JS'">

    Tutorial Name : {{ TutorialName}}

</div>

</body>
</html>

Code 説明：

1. ng-init ディレクティブが div タグに追加され、「TutorialName」というローカル変数が定義されます。これに与えられる値は「AngularJS」です。
2. AngularJSの式を使用して、ng-initディレクティブで定義された変数名「TutorialName」の出力を表示しています。

コードが正常に実行されると、以下の出力が表示されます。

出力：

出力では、

• 結果には、文字列「AngularJS」を含む式の出力が明確に示されています。 これは、文字列「AngularJS」が ng-init セクションの変数「TutorialName」に割り当てられた結果です。

次の指示は、画面からモデルへデータを送り返す。

AngularJS の ng モデル

そして最後に、HTMLコントロールの値をアプリケーションデータにバインドするために使用されるng-modelディレクティブがあります。

NGモデルの例

この例では、

• 「数量」と「価格」という 2 つの変数を作成します。 これらの変数は 2 つのテキスト入力コントロールにバインドされます。
• 次に、価格と数量の両方の値の乗算に基づいて合計金額を表示します。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

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

    People : <input type="number" ng-model="quantity">

    Registration Price : <input type="number" ng-model="price">

    Total : {{quantity * price}}

</div>

</body>
</html>

Code 説明：

1. ng-init ディレクティブが div タグに追加され、2 つのローカル変数が定義されます。 XNUMX つは「量」、もう XNUMX つは「価格」と呼ばれます。
2. ここで、ng-model ディレクティブを使用して、「People」と「Registration price」のテキスト ボックスをそれぞれローカル変数「quantity」と「price」にバインドします。
3. 最後に、数量と価格の変数を乗算した式で合計を表示します。

コードが正常に実行されると、以下の出力が表示されます。

出力：

• 出力には、人数と登録価格の値の乗算が明確に示されています。

これで、テキストボックス内の「人数」と「登録料金」の値を変更すると、合計金額が自動的に変更されます。

• 上記の出力は、AngularJS のデータバインディングの強力さを示しています。これは、 ng-model ディレクティブ.

4つのうち最後の1つは、複数の値を一度に処理します。

AngularJS の ng-repeat

これは HTML 要素を繰り返すために使用されます。 以下の例は、 ng-repeat ディレクティブ.

NGリピートの例

この例では、

• 配列変数に章名の配列を入れて、
• 次に、ng-repeat ディレクティブを使用して、配列の各要素をリスト項目として表示します。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
    <ul>
        <li ng-repeat="names in chapters">
            {{names}}
        </li>
    </ul>

</div>

</body>
</html>

Code 説明：

1. ng-init ディレクティブが div タグに追加され、3 つの文字列を含む配列変数である「chapters」と呼ばれる変数が定義されます。
2. ng-repeat 要素は、「names」と呼ばれるインライン変数を宣言し、chapters 配列内の各要素を調べることによって使用されます。
3. 最後に、ローカル インライン変数「names」の値を表示します。

コードが正常に実行されると、以下の出力が表示されます。

出力：

• 上記の出力は、ng-repeat ディレクティブが「chapters」と呼ばれる配列内の各値を受け取り、配列内の各項目に対して HTML リスト項目を作成したことを示しています。

これら4つは、起動、データ、バインディング、繰り返し処理を網羅しています。以下に、次に続く処理を示します。

その他、よく使われるAngularJSの組み込みディレクティブ

上記の4つの指示は出発点となるものであり、ライブラリ全体ではありません。以下の各項目は、制御対象の要素に直接設定する属性です。

• ng-bind: 要素のテキストにスコープ値を書き込みますが、読み込み時に一時的に生の括弧を表示しません。
• ng-if: 式が偽の場合にDOMから要素を削除し、真の場合に要素を再構築します。
• ng-show と ng-hide: TogglCSSで表示/非表示を切り替える。要素はDOM内に残るため、繰り返し切り替えてもコストが少なくて済みます。
• ng-class: 式にCSSクラスを追加または削除し、スタイルがモデルに従うようにします。
• ng-click: ユーザーが要素をクリックしたときに、式またはスコープ関数を実行します。
• ng-controller: ページがng-initの範囲を超えた場合に、マークアップのブロックにコントローラーをアタッチします。
• ng-disabled と ng-readonly: 式が真である場合はいつでも、対応するフォーム属性を設定します。

以下のFAQでは、このリストに続いて最もよく寄せられる質問への回答を掲載しています。

よくあるご質問