この記事では主にangularjsの関連知識を紹介しますので、興味のある方はぜひご覧ください。 AngularJS は、新しい属性と式を使用して HTML を拡張します。 AngularJS はシングルページ アプリケーション (SPA: シングル ページ アプリケーション) を構築できます。
angularjs の紹介
AngularJS は JavaScript フレームワークです。 <script> タグを介して HTML ページに追加できます。 </p> <p>AngularJS はディレクティブを通じて HTML を拡張し、式を通じてデータを HTML にバインドします。 </p> <p>AngularJS は JavaScript フレームワークです </p> <p>AngularJS は JavaScript フレームワークです。 JavaScriptで書かれたライブラリです。 </p> <p>AngularJS は JavaScript ファイルとして公開され、スクリプト タグ: </p> <p><script src="http://cdn.static.runoob.com/libs/angular.js/1.4." を使用して Web ページに追加できます。 6 /angular.min.js"></script>
注: スクリプトを
要素の下部に配置することをお勧めします。これにより、HTML の読み込みはスクリプトの読み込みの影響を受けないため、Web ページの読み込み速度が向上します。
さまざまな angular.js バージョンをダウンロード: https://github.com/angular/angular.js/releases
AngularJS は HTML を拡張します
AngularJS は ng-ディレクティブを通じて HTML を拡張します。
ng-app ディレクティブは、AngularJS アプリケーションを定義します。
ng-model ディレクティブは、要素の値 (入力フィールドの値など) をアプリケーションにバインドします。
ng-bind ディレクティブは、アプリケーション データを HTML ビューにバインドします。
AngularJS の例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <p ng-app=""> <p>名字 : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> </p> </body> </html>
例の説明:
Web ページが読み込まれると、AngularJS が自動的に起動します。
ng-app ディレクティブは、
要素が AngularJS アプリケーションの「所有者」であることを AngularJS に伝えます。
ng-model ディレクティブは、入力フィールドの値をアプリケーション変数名にバインドします。
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 アプリケーション変数を初期化します。
AngularJS の例
<p ng-app="" ng-init="firstName='John'"> <p>姓名为 <span ng-bind="firstName"></span></p> </p>
注 HTML5 では、data- で始まる拡張 (自家製) 属性が許可されています。
AngularJS 属性は ng- で始まりますが、data-ng- を使用してページを HTML5 で有効にすることができます。
有効な HTML5 の場合:
AngularJS インスタンス
<p data-ng-app="" data-ng-init="firstName='John'"> <p>姓名为 <span data-ng-bind="firstName"></span></p> </p>
AngularJS 式
AngularJS 式は二重中括弧内に記述されます: {{ 式 }}。
AngularJS 式はデータを HTML にバインドします。これは ng-bind ディレクティブに似ています。
AngularJS は、式が記述された場所にデータを「出力」します。
AngularJS 式は JavaScript 式によく似ており、リテラル、演算子、変数を含めることができます。
インスタンス {{ 5 + 5 }} または {{ firstName + " " + lastName }}
AngularJS インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <p ng-app=""> <p>我的第一个表达式: {{ 5 + 5 }}</p> </p> </body> </html>
AngularJS アプリケーション
AngularJS モジュール (Module) は AngularJS アプリケーションを定義します。
AngularJS コントローラー (Controller) は、AngularJS アプリケーションを制御するために使用されます。
ng-app ディレクティブはアプリケーションを定義し、ng-controller はコントローラーを定義します。
AngularJS の例
<p ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}} </p> <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"; });
関連推奨事項:
AngularJS を共有するショッピングカート内の全選択と選択を反転する機能の実現例
入力ボックスの文字数制限リマインダー機能をAngularJSで実現
以上がAngularJS チュートリアルとサンプル コード分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。