AngularJS の概要
AngularJS は JavaScript フレームワークです。 <script> タグを介して HTML ページに追加できます。
AngularJS は、ディレクティブを通じて HTML を拡張し、式を通じてデータを HTML にバインドします。
AngularJS は JavaScript フレームワークです
AngularJS は JavaScript フレームワークです。 JavaScriptで書かれたライブラリです。
AngularJS は JavaScript ファイルとして公開され、スクリプト タグ:
 | スクリプトを <body> 要素の下部に配置します。 これにより、HTML の読み込みはスクリプトの読み込みの影響を受けないため、Web ページの読み込み速度が向上します。 |
|---|
angular.js の各バージョンをダウンロードします: https://github.com/angular/angular.js/releases
AngularJS は HTML を拡張します
AngularJS は ng-directives を通じて HTML を拡張します。
ng-app ディレクティブは、AngularJS アプリケーションを定義します。
ng-model ディレクティブは、要素の値 (入力フィールドの値など) をアプリケーションにバインドします。
ng-bind ディレクティブは、アプリケーション データを HTML ビューにバインドします。
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
インスタンスの説明:
Webページがロードされると、AngularJSが自動的に起動します。
ng-app ディレクティブは、<div> 要素が AngularJS アプリケーション の「所有者」であることを AngularJS に伝えます。
ng-model ディレクティブは、入力フィールドの値をアプリケーション変数 name にバインドします。
ng-bind ディレクティブは、アプリケーション変数名を段落の innerHTML にバインドします。
| ng-appディレクティブを削除すると、HTMLは式の結果を計算せずに式を直接表示します。 |
|---|
AngularJS とは何ですか?
AngularJS を使用すると、最新のシングル ページ アプリケーション (SPA: シングル ページ アプリケーション) の開発が容易になります。
AngularJS はアプリケーション データを HTML 要素にバインドします。
AngularJS は HTML 要素を複製して繰り返すことができます。
AngularJS は HTML 要素を非表示にしたり表示したりできます。
AngularJS は HTML 要素の「後ろ」にコードを追加できます。
AngularJS は入力検証をサポートしています。
AngularJS ディレクティブ
ご覧のとおり、AngularJS ディレクティブは ng というプレフィックスが付いている HTML 属性です。
ng-init ディレクティブは、AngularJS アプリケーション変数を初期化します。例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="" ng-init="firstName='John'"> <p>姓名为 <span ng-bind="firstName"></span></p> </div> </body> </html>
オンライン インスタンスを表示するには、[例を実行] ボタンをクリックします
有効な HTML5 の場合:
例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div data-ng-app="" data-ng-init="firstName='John'"> <p>姓名为 <span data-ng-bind="firstName"></span></p> </div> </body> </html>
サンプルの実行»
「サンプルの実行」ボタンをクリックしてオンラインサンプルを表示します
AngularJS 式
AngularJS 式は二重中括弧内に記述されます: {{ 式 }}。
AngularJS 式はデータを HTML にバインドします。これは ng-bind ディレクティブと似ています。
AngularJS は、式が記述された場所にデータを「出力」します。
AngularJS 式は JavaScript によく似ています 式 : 式には、リテラル、演算子、変数を含めることができます。
インスタンス {{ 5 + 5 }} または {{ firstName + " " + lastName }}
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
</body>
</html>インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
AngularJS アプリケーション
AngularJS Module は AngularJS アプリケーションを定義します。
AngularJS Controller は、AngularJS アプリケーションを制御するために使用されます。
ng-app ディレクティブはアプリケーションを定義し、ng-controller はコントローラーを定義します。
インスタンス
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<p>尝试修改以下表单。</p>
<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= "John";
$scope.lastName= "Doe";
});
</script>
</body>
</html>サンプルの実行»
オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください
AngularJSモジュール定義アプリケーション:
AngularJSモジュール
AngularJS コントローラー制御アプリケーション:
AngularJS コントローラー
$scope.firstName= "ジョン";
$scope.lastName= "Doe";
});
次のチュートリアルでは、アプリケーションとモジュールについて詳しく学習します。
| HTML5 では、拡張機能 (自作) 属性を Data- | AngularJS 属性は ng- で始まりますが、 data-ng- を使用してページを HTML5 で有効にすることができます。 |
|---|