Angularjs-directives
提供:Dev Guides
AngularJS-ディレクティブ
AngularJSディレクティブは、HTMLを拡張するために使用されます。 これらは、 ng -prefixで始まる特別な属性です。 私たちは次のディレクティブを議論しましょう-
- ng-app -このディレクティブはAngularJSアプリケーションを起動します。
- ng-init -このディレクティブは、アプリケーションデータを初期化します。
- ng-model -このディレクティブは、AngularJSで使用される変数であるモデルを定義します。
- ng-repeat -このディレクティブは、コレクション内のアイテムごとにHTML要素を繰り返します。
ng-appディレクティブ
ng-appディレクティブは、AngularJSアプリケーションを起動します。 ルート要素を定義します。 AngularJS Applicationを含むWebページがロードされると、アプリケーションを自動的に初期化またはブートストラップします。 また、AngularJSアプリケーションでさまざまなAngularJSモジュールをロードするためにも使用されます。 次の例では、<div>要素のng-app属性を使用してデフォルトのAngularJSアプリケーションを定義します。
<div ng-app = "">
...
</div>
ng-initディレクティブ
ng-initディレクティブは、AngularJSアプリケーションデータを初期化します。 変数に値を割り当てるために使用されます。 次の例では、国の配列を初期化します。 国の配列を定義するために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>
例
次の例は、上記のすべてのディレクティブの使用方法を示しています。
testAngularJS
<html>
<head>
<title>AngularJS Directives</title>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</body>
</html>
出力
ファイル_testAngularJS_をWebブラウザーで開きます。 名前を入力して結果を確認します。