AngularJSは、JavaScriptのフレームワークです。 これは、<スクリプト>タグでHTMLページに追加することができます。
AngularJSは、HTMLが指令に属性延びており、 式にHTMLにデータをバインドします。
AngularJSは、JavaScriptのフレームワークであります
AngularJSは、JavaScriptのフレームワークです。 これはJavaScriptで書かれたライブラリです。
AngularJSはJavaScriptファイルとして配布され、スクリプトタグを使用したWebページに追加することができます。
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>AngularJSは、HTMLを拡張します
AngularJSはNG-ディレクティブを使用してHTMLを拡張します。
NG-アプリディレクティブはAngularJSアプリケーションを定義します。
NG-モデルディレクティブは、アプリケーションデータへのHTMLコントロール（入力、選択、テキストエリア）の値をバインドします。
NG-バインドディレクティブは、HTMLビューにアプリケーションデータをバインドします。
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>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
»それを自分で試してみてください 例を説明しました：
Webページが読み込まれたときAngularJSが自動的に起動します。
NG-アプリのディレクティブは<div>要素はAngularJS アプリケーションの「所有者」であるAngularJSを伝えます。
NG-モデルディレクティブは、アプリケーション変数名の入力フィールドの値をバインドします。
NG-バインドディレクティブは、アプリケーション変数名に<p>要素のinnerHTMLプロパティをバインドします。
AngularJSディレクティブ
すでに見てきたように、AngularJSディレクティブは、HTMLはngの接頭辞を持つ属性です。
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-の、 データ-ng-使用することができます。 |
|---|
後でこのチュートリアル内のディレクティブについてより多くを学びます。
AngularJS式
{{式}}：AngularJS式は二重の中括弧の内側に書かれています。
AngularJSは、「出力」データは、式が書かれているであろう場所を正確に：
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>
»それを自分で試してみてください AngularJS表現はNG-バインドディレクティブと同じようにHTMLにAngularJSデータをバインドします。
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>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
»それを自分で試してみてください 後でこのチュートリアルで表現できるかを学びます。
AngularJSアプリケーション
AngularJS モジュールは AngularJSアプリケーションを定義します。
AngularJS コントローラは AngularJSのアプリケーションを制御します。
NG-アプリディレクティブはNG-コントローラディレクティブはコントローラを定義し、アプリケーションを定義します。
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";
});
後でこのチュートリアルのモジュールとコントローラについての詳細を学びます。