AngularJS 入門チュートリアル AngularJS 説明書_AngularJS

WBOY

リリース： 2016-05-16 15:05:03

オリジナル

1675 人が閲覧しました

HTML に詳しい友人は、HTML には多くの属性があることを知っています。たとえば、タグの href 属性はリンクの URL アドレスを指定するために使用でき、タグの type 属性は入力の種類を指定するために使用できます。 AngularJS ディレクティブは、HTML 属性を拡張することにより、AngularJS アプリケーションに機能を追加します。

AngularJS ディレクティブは HTML を拡張するために使用されます。これらは、ng- 接頭辞で始まる特別なプロパティです。次のディレクティブについて説明します:

一般的な AngularJS コマンド

ng-app ディレクティブは、AngularJS アプリケーションを初期化します。

ng-init ディレクティブはアプリケーションデータを初期化します。

ng-model ディレクティブは、要素の値 (入力フィールドの値など) をアプリケーションにバインドします。

ng-app ディレクティブ

ng-app ディレクティブは、AngularJS アプリケーションを開始します。ルート要素を定義します。 AngularJS アプリケーションを含む Web ページを読み込むアプリケーションを自動的に初期化または起動します。また、さまざまな AngularJS モジュールを AngularJS アプリケーションにロードするためにも使用されます。以下の例では、div 要素の ng-app 属性を使用してデフォルトの AngularJS アプリケーションを定義します。

<div ng-app="">
...
</div>

ログイン後にコピー

ng-init コマンド

ng-init ディレクティブは、AngularJS アプリケーションのデータを初期化します。アプリケーションで使用する変数に値を入れるために使用されます。次の例では、countries 配列を初期化します。 JSON 構文を使用して国の配列を定義します。

<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">

...
</div>

ログイン後にコピー

ng-model ディレクティブ

ng-model ディレクティブは、AngularJS アプリケーションで使用されるモデル/変数を定義します。以下の例では、「name」という名前のモデルを定義します。

<div ng-app="">
...
<p>Enter your Name: <input type="text" ng-model="name"></p>
</div>

ログイン後にコピー

ng-repeat ディレクティブ

ng-repeat ディレクティブは、HTML 要素のコレクション内の各項目を繰り返します。以下の例では、配列の国を反復処理しています。

<div ng-app="">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>

ログイン後にコピー

AngularJS ディレクティブの例

<div ng-app="" ng-init="firstName='John'">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>
</div>

ログイン後にコピー

ng-app ディレクティブは、現在の

要素が AngularJS アプリケーションであることを AngularJS に伝えます。ng-init ディレクティブは、JavaScript で変数を定義するのと同じです。 AngularJS のデータバインディングは、AngularJS 式と AngularJS データを同期します。 {{ firstName }} は ng-model="firstName" を通じて同期されます。上記の例では、入力ボックスに入力した内容がページ上に同時に表示されます。

注意

Web ページには、さまざまな要素で実行される複数の AngularJS アプリケーションを含めることができます。
ng-init を使用してデータを初期化することはあまり一般的ではありません。データを初期化するより良い方法については、後続の章で学習します。

ng-repeat ディレクティブ

ng-repeat ディレクティブは HTML 要素を繰り返します。これは JavaScript の each ループに相当します

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>

ログイン後にコピー

上記の例は次の HTML に解析されます

<ul>
<li>Jani</li>
<li>Hege</li>
<li>Kai</li>
</ul>

ログイン後にコピー

ng-repeat はオブジェクト配列で動作します:

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>

ログイン後にコピー

は次の HTML に解析されます:

<ul>
<li>Jani, Norway</li>
<li>Hege, Sweden</li>
<li>Kai, Denmark</li>
</ul>

ログイン後にコピー

カスタム手順

AngularJS の組み込みディレクティブに加えて、カスタムディレクティブも作成できます。 .directive 関数を使用してカスタムディレクティブを追加できます。カスタムディレクティブを呼び出すには、カスタムディレクティブ名を HTMl 要素に追加する必要があります。キャメルケースを使用してディレクティブに名前を付けます askh5Directive ですが、使用する場合は - で区切る必要があります: askh5-directive

<body ng-app="myApp">
<askh5-directive></askh5-directive>
<script>
var app = angular.module("myApp", []);
app.directive("askh5Directive", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>

ログイン後にコピー

上記の例は次のように解析されます。

カスタム手順!

命令は次の方法で呼び出すことができます:

要素名:

属性:

クラス名:

コメント:

使用を制限する

制限値は次のとおりです:

E は要素名でのみ使用できます

A は属性にのみ使用できます

C はクラス名でのみ使用できます

M はコメント専用です

restrict のデフォルト値は EA です。つまり、命令は要素名と属性名を通じて呼び出すことができます。

var app = angular.module("myApp", []);
app.directive("askh5Directive", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});

ログイン後にコピー

上記の AngularJS ではプロパティ呼び出しのみが許可されます。

AngularJS 入門チュートリアル - AngularJS 式

上記の内容は、編集者が紹介するAngularJS入門チュートリアルのAngularJS手順です。皆様のお役に立てれば幸いです。