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

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

A 指令 AngularJS のは、HTML に新しい機能を提供するコマンドです。 Angular が HTML コードを処理するとき、まずページ内のディレクティブを見つけて、それに応じて HTML ページを解析します。 AngularJS ディレクティブの簡単な例は、これまでの章で説明したように、「ng-model ディレクティブ」です。このディレクティブは、データモデルをビューにバインドするために使用されます。

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

AngularJS でディレクティブを作成する方法

冒頭で定義したように、AngularJS ディレクティブは、AngularJS ディレクティブの機能を拡張する方法です。 HTML.

には 4 つのディレクティブが定義されています AngularJS.

以下は、AngularJS ディレクティブのリストと、それぞれを説明するために提供されている例です。

AngularJS の ng-app

これは、Angular.JS アプリケーションを初期化するために使用されます。このディレクティブが HTML ページ内に配置されると、基本的に、この HTML ページが angular.js アプリケーションであることが Angular に伝えられます。

npアプリの例

以下の例は、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>

コードの説明：

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

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力には、アプリケーションを angularjs アプリケーションとして定義したためにのみ可能になった式の出力が明確に示されています。

AngularJS の ng-init

アプリケーションデータの初期化に使用されます。場合によっては、アプリケーションにローカルデータが必要になることがあります。これは、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>

コードの説明：

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

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力では、

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

AngularJS の ng モデル

最後に、HTML コントロールの値をアプリケーションデータにバインドするために使用される ng-model ディレクティブがあります。以下の例は、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>

コードの説明：

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

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

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

ここで、テキストボックスに移動して、人数と登録価格の値を変更すると、合計が自動的に変更されます。

上記の出力は、angularJs のデータバインディングの力を示しているだけです。これは、 ng-model ディレクティブ.

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>

コードの説明：

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

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

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

製品概要

ディレクティブは HTML の機能を拡張するために使用されます。 Angular は、次のような組み込みディレクティブを提供します。

ng-app – これは、Angular アプリケーションを初期化するために使用されます。
ng-init – アプリケーション変数の作成に使用されます
ng-model – HTML コントロールをアプリケーションデータにバインドするために使用されます
ng-repeat – angular を使用して要素を繰り返すために使用されます。

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

AngularJS でディレクティブを作成する方法

AngularJS の ng-app

npアプリの例

AngularJS の ng-init

ng-initの例

関連記事

AngularJS の ng モデル

NGモデルの例

AngularJS の ng-repeat

NGリピートの例

製品概要

ニュースレターに登録する