AngularJSの紹介
AngularJSはJavaScriptフレームワークです。<script>タグを使用してHTMLページに追加できます。
AngularJSは、 ディレクティブを使用してHTML属性を拡張し、式を使用してデータをHTMLにバインドします。
AngularJSはJavaScriptフレームワークです
AngularJSは、JavaScriptで記述されたJavaScriptフレームワークです。
AngularJSはJavaScriptファイルとして配布され、スクリプトタグを使用してWebページに追加できます。
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
AngularJSはHTMLを拡張します
AngularJSは、ng-directivesを使用してHTMLを拡張します。
ng-appディレクティブは、AngularJSアプリケーションを定義します。
ng-modelディレクティブは、HTMLコントロール（input、select、textarea）の値をアプリケーションデータにバインドします。
ng-bindディレクティブは、アプリケーションデータをHTMLビューにバインドします。
AngularJSの例
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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>
説明された例：
Webページが読み込まれると、AngularJSが自動的に起動します。
ng-appディレクティブは、<div>要素がAngularJSアプリケーションの「所有者」であることをAngularJSに通知します。
ng-modelディレクティブは、入力フィールドの値をアプリケーション変数名にバインドします。
ng-bindディレクティブは、<p>要素の内容をアプリケーション変数名にバインドします。
AngularJSディレクティブ
すでに見てきたように、AngularJSディレクティブはngプレフィックスが付いたHTML属性です。
ng-initディレクティブは、AngularJSアプリケーション変数を初期化します。
AngularJSの例
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
または、有効なHTMLを使用します。
AngularJSの例
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
ページのHTMLを有効にする場合は、 ng-の代わりにdata-ng-を使用できます。
このチュートリアルの後半で、ディレクティブについてさらに詳しく学習します。
AngularJS式
AngularJS式は二重中括弧内に記述されます：{{expression}}。
AngularJSは、式が書き込まれた場所に正確にデータを「出力」します。
AngularJSの例
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS式は、 ng-bind ディレクティブと同じ方法でAngularJSデータをHTMLにバインドします。
AngularJSの例
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
式については、このチュートリアルの後半で詳しく学習します。
AngularJSアプリケーション
AngularJSモジュールはAngularJSアプリケーションを定義します。
AngularJSコントローラーはAngularJSアプリケーションを制御します。
ng-app ディレクティブはアプリケーションを定義し、ng -controller ディレクティブはコントローラーを定義します。
AngularJSの例
<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>
AngularJSモジュールはアプリケーションを定義します：
AngularJSモジュール
var app = angular.module('myApp', []);
AngularJSコントローラーはアプリケーションを制御します：
AngularJSコントローラー
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
モジュールとコントローラーについては、このチュートリアルの後半で詳しく説明します。