AngularJS フロントエンドフレームワークの使用方法? angularjs フロントエンド フレームワークの使用の概要

この記事では主にangularjsのフロントエンドフレームワークについての学習を紹介します。今すぐこの記事を一緒に読みましょう

1. AngularJS の主な紹介:

AngularJS はアプリケーション データを HTML 要素にバインドします

AngularJS は HTML 要素を複製して繰り返すことができます

AngularJS は HTML 要素を表示および非表示にすることができます

AngularJS はコードを追加できますHTML 要素の「背後」

AngularJS は入力検証をサポートします

2. AngularJS ディレクティブの機能:

ng-directives は HTML を拡張します

ng-model ディレクティブは要素の値 (入力フィールド値など) を ng-bind にバインドしますこの命令はアプリケーション データを HTML ビューにバインドします。つまり、バックグラウンド データを ng-init 初期化ページ

のフロントエンド

変数にバインドします。 AngularJS

モジュール

は AngularJS アプリケーションを定義します。 AngularJS

Controller

は、AngularJS アプリケーションを制御するために使用されます。 3. AngularJS 式:

AngularJS 式は二重中括弧内に記述されます:

{{ 式 }}

。 AngularJS 式はデータを HTML にバインドします。これは

ng-bind

ディレクティブに似ています。

AngularJS は式が書かれた位置にデータを「出力」します。

4. AngularJS 式と JavaScript 式の違い

JavaScript 式と同様に、AngularJS 式には文字、演算子、変数を含めることができます

JavaScript 式とは異なり、AngularJS 式は HTML で記述できます

JavaScript 式とは異なり、AngularJS 式は条件判断、ループ、例外はサポートされていません

JavaScript 式とは異なり、AngularJS 式はフィルターをサポートしています。

5. AngularJS はモジュールを定義します:

varapp = angular.module('myApp', []);

6. AngularJS 命令の学習:

• [

  ng-init: データの初期化]

1. 単一の変数を初期化します

407ebec7beea0640385e56c393bcd5f8d3771b0717303fa4cff39e39630091b7名前: a0d8fd2087ba189cf0fb9b9ab8201ce73番目の値は{{points[2] }}1e08ad2feb3e63b415e0fb33f4e266861e08ad2feb3e63b415e0fb33f4e26686[実行結果:] 3番目の値は19です]【ng-model: データ同期】 1. AngularJS データバインディングにng-modelを使用し、同時にバックエンドにデータを転送しますフロントエンドに 2 つの関連するデータがある限り、一方が変更されると、もう一方もすぐに変更されます

  <p ng-app="" ng-init="quantity=1;price=5”> 
<h2>价格计算器</h2> 
数量： <input type="number"  ng-model="quantity”> 
价格： <input type="number" ng-model="price”>
<p><b>总价：</b> {{ quantity * price }}</p>
</p>

[ng-repeat: データループ] 1 AngularJS は ng-repeat を使用してデータをループします。ループの html タグは ng-repeat 命令が配置されるタグです。

                        5febe34c59450fb17b70c81c5ffd10f9 

                                  d3771b0717303fa4cff39e39630091b7使用 ng-repeat 来循环数组8c05e4ba700ecf3a3fba632670b48d2e 

                                  94cf9f71896cce458971adf2bc978fb1

                                          4fa76e168b8fe1de649ff42059b63884

 {{ x }} 00264599778bfef15205fe2f698216e0

                                  6f304873f188339d0626400a7defcfa7 

                        721bb74aac4891df28f85ad785726569【执行结果：li整一个标记和里面的内容进行循环重复】

• 【ng-app：应用程序】

1、ng-app 指令定义一个 AngularJS 应用程序,ng-app 指令告诉 AngularJS，e388a4556c0f65e1904146cc1a846bee 元素是 AngularJS应用程序的"所有者"。     

2、ng-app 指令指明了应用,  ng-controller 指明了控制器，放在一个p的属性中，指明这一段p都在AngularJS的控制范围内

3、ng-app 指令定义了 AngularJS 应用程序的 根元素

4、ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序 

•  <p ng-app="" ng-init="firstName=&#39;John’">
                       <p>姓名为 <span ng-bind=“firstName”></span></p>
           </p

•  【ng-bind：数据绑定】  
  

         1、绑定单一变量（想看更多就到PHP中文网AngularJS开发手册中学习）

️

"firstName='John';lastName='Doe'"9b1f8a8bb4fc3859ecdb2362a0726b9b名前: 766629d63a7c657229b4752433186bd4c9626f63507b2c0ed93591abb3800e94e9251dcbf92c73ac6197cc9d3eda130e[実行結果:名前:Doe] 2. Jsonオブジェクトを初期化します 73e99285cc4c616ed8446a8488e07b47a303e49579ba469d13bb2bc8d3365dc154bdf357c58b8a65c66d7c19c8e4d114d4270eea9cf0933799af699b5adfcb1c121bf8d574a51e3568938417e1cee179"points=[1,15,19,2,40]">ff7c5afe0177c948e2fc8c38bf4eddf1

>の3番目の値。 [実行結果:

3番目の値は19][ng-show:データ表示] 1. ng-showディレクティブがng-show属性にある場合値が true の場合、ng-show 命令が配置されているタグの内容が表示されます

メール: ng-show= "myForm.myAddress.$error.email " & gt; & は有効なメールボックス アドレスではありません/span & gt; & lt;

/form

& gt; 値が正当なメール アドレスの場合は、「正当なメール アドレスではありません」は表示されません。それ以外の場合は、表示されます。 {] {{Myform.myaddress. $ Valid}} (入力の値が正当な場合は true) {{myForm.Myaddress. $ DIRTY} (値が変更された場合) {{myForm.myAddress. $touched}} (タッチスクリーンでクリックされた場合は true) [これらは一般的に ng-show の判定条件として使用されます] [ng-options: ドロップダウン選択] ]
1. コードを作成します fdb56dfb4baf2796c3a909ab62c233ac

d79f34d20a7b37229d456dc58029d9bf

例] 2つの違い：文字列を選択するためのng-repeat、およびオブジェクトを選択するng-options

【【【ng-disabled：ボタン属性があるかどうかを示します利用可能]

1. trueはボタンが利用できないことを意味し、falseはボタンが利用できることを意味します

• 【
ng-hide

:マークが非表示かどうかを示します】

true は ng-hide が配置されているマークが非表示であることを意味し、false は ng-hide が配置されているマークが表示されていることを意味します。これは ng-show の逆です

• 
  

  [
ng-click

: AngularJSクリックイベント]

1. ng-click ディレクティブは、AngularJS のクリックイベントを定義します

• 7. カスタム ディレクティブの定義と使用
  

【

.directive

: カスタム命令の追加 】

1. ディレクティブの定義

• app.directive("runoobDirective", function() {

  var app = angular.module("myApp", []);
  

  return {
  restリット;

  });

  2. 命令呼び出し

  マーク呼び出し:

  089c5ef685484407eba11987bf1f157b

  9990019f6ca89ed832259ce9a901b22d

  プロパティへの電話:

  5309388960fafb65e625212431bb391e

  d740b3d1807a4b0c5dd424c5faf7db94】 3. 命令の使用範囲を制限する(デフォルトはEAとして)

  E: 要素名として使用します A:属性として使用します C: クラス名として使用します M: コメントとして使用します [注] 1. type="number" は、この入力ボックスが数値形式であることを意味します。上下をクリックすると増加します。または数字を減らしますが、数字以外の文字も入力できます

  この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト AngularJS ユーザー マニュアル にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上がAngularJS フロントエンドフレームワークの使用方法? angularjs フロントエンド フレームワークの使用の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。