AngularJS 紹介
- 前のページ AngularJS チュートリアル
- 次のページ AngularJS 表現
AngularJSは JavaScriptフレームワーク。HTMLページに<script>タグで追加できます。
AngularJSはコマンドHTML属性を拡張し、表現HTMLにデータバインド
AngularJSはJavaScriptフレームワーク
AngularJSはJavaScriptで書かれたJavaScriptフレームワーク
AngularJSはJavaScriptファイルの形式で配布され、scriptタグでウェブページに追加できます：
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
AngularJSがHTMLを拡張
AngularJSが使用 ng-コマンドHTMLを拡張
ng-app AngularJSアプリケーションを定義するコマンド
ng-model HTMLコントロール（input、select、textarea）の値をアプリケーションデータにバインドするコマンド
ng-bind HTMLビューにアプリケーションデータをバインドするコマンド
AngularJS インスタンス
<!DOCTYPE html> <html> <script src="https://cdn.staticfile.net/angular.js/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>
例説明：
ウェブページが読み込まれた後に、AngularJSが自動的に起動します。
ng-app AngularJSに、<div>要素がAngularJSの アプリケーションの「所有者」。
ng-model アプリケーション変数に入力フィールドの値をバインドするコマンド name。
ng-bind 指令は<p>要素の内容をアプリケーション変数にバインドします。 name。
AngularJS インストラクション
ご覧の通り、AngularJS指令は ng のプレフィックスを持つHTML属性です。
ng-init 指令はAngularJSアプリケーション変数を初期化します。
AngularJS インスタンス
<div ng-app="" ng-init="firstName='Bill'"> <p>名前は <span ng-bind="firstName"></span></p> </div>
または有効なHTMLを使用します：
AngularJS インスタンス
<div data-ng-app="" data-ng-init="firstName='Bill'"> <p>名前は <span data-ng-bind="firstName"></span></p> </div>
ページのHTMLが有効になるようにするには、 data-ng- ではなく ng-。
このチュートリアルの後半で、指令に関する詳細な情報を学びます。
AngularJS 表現
AngularJSエクスプレッションは二重大括号内に書かれます：{{ expression }}。
AngularJSはエクスプレッションの場所にデータを「出力」します：
AngularJS インスタンス
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>私の最初のエクスプレッション：{{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJSエクスプレッションはAngularJSデータをHTMLにバインドし、 ng-bind 指令の方法は同じです。
AngularJS インスタンス
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/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">
<input type="text" ng-model="firstName"><br>
姓：<input type="text" ng-model="lastName"><br>
<br>
全名：{{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
</script>
AngularJS モジュールがアプリケーションを定義します：
AngularJS モジュール
var app = angular.module('myApp', []);
AngularJS コントローラがアプリケーションを制御します：
AngularJS コントローラ
app.controller('myCtrl', function($scope) {
$scope.firstName= "Bill";
$scope.lastName= "Gates";
});
このチュートリアルの後で、モジュールとコントローラに関する詳細な情報を学びます。
- 前のページ AngularJS チュートリアル
- 次のページ AngularJS 表現
