AngularJS は、JavaScript のフレームワークであり、 <script> タグを使用して HTML ページに追加します。
AngularJS は、ディレクティブにより HTML 属性を拡張すると共に、 式によって HTML にデータをバインドします。
AngularJS は、JavaScript のフレームワークで、JavaScript で書かれたライブラリです。
AngularJS は、JavaScriptファイルとして配布されており、script タグを使用して Web ページに追加することができます：
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
AngularJS は、ng-ディレクティブにより HTML を拡張します。
ng-app ディレクティブは、AngularJS のアプリケーションを定義します。
ng-model ディレクティブは、HTML コントロール (input, select, textarea) の値を アプリケーション・データにバインドします。
ng-bind ディレクティブは、アプリケーションデータを HTML ビューにバインドします。
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Try it Yourself »
例の説明：
AngularJS は、Web ページがロードされると自動的にスタートします。
ng-app ディレクティブは、<div> 要素が AngularJS アプリケーション の "owner" であることを AngularJS に伝えます。
ng-model ディレクティブは、アプリケーション変数 name と 入力フィールドの値をバインドします。
ng-bind ディレクティブは、<p> 要素の innerHTML をアプリケーション変数 name にバインドします。
既に見たように、AngularJS ディレクティブは、ng の接頭辞を持った HTML 属性です。
ng-initディレクティブは、AngularJS アプリケーションの変数を初期化します。
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Try it Yourself »
代わりに妥当な HTML を使用する場合：
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Try it Yourself »
|
ページの HTML を妥当なものにしたい場合は、ng- の代わりに data-ng- を 使用することができます。 |
|---|
ディレクティブの詳細は、このチュートリアルの後段で学習します。
AngularJS の式は、2 重の波括弧の中に記述します：{{ 式 }}。
AngularJS は、式が書かれているその場所にデータを「出力」します。
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Try it Yourself »
AngularJS の式は、ng-bindディレクティブと同じ方法で、 AngularJS データを HTML にバインドします。
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Try it Yourself »
式の詳細は、このチュートリアルの後段で学習します。
AngularJS のモジュールは、AngularJS アプリケーションを定義します。
AngularJS のコントローラは、AngularJS アプリケーションをコントロールします。
ng-app ディレクティブは、アプリケーションを定義し、 ng-controller ディレクティブは、コントローラを定義します。
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
Try it Yourself »
AngularJS モジュールは、アプリケーションを定義します：
var app = angular.module('myApp', []);
AngularJS コントローラは、アプリケーションをコントロールします：
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
モジュールとコントローラの詳細は、このチュートリアルの後段で学習します。