AngularJS フロントエンドフレームワークの使用方法? angularjs フロントエンドフレームワークの使用の概要-jsチュートリアル-php.cn

この記事では主に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. 単一の変数を初期化します

<p ng-app="" ng-init="firstName='John';名前=「ドー」「><p>名前: <スパン ng-bind=」名 + ' ' + 姓 ">span>p>p>[実行結果] : 名前: Doe】
2. Json オブジェクトを初期化します
ng-init =「人 / p> <p ng-app」 ="" ng-init="ポイント=[1,1 5,19,2,40 ]"> < p>3番目の値は{{points[2] }}p
>p
>[実行結果:] 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 命令が配置されるタグです。
  <p ng-app="" ng-init="names=['Jani','Hege','Kai']”>

<p>使用 ng-repeat 来循环数组p>

<ul>

<li ng-repeat="x in names">
{{ x }} li>

ul>

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

【ng-app：应用程序】

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

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

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

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

<p ng-app="" ng-init="firstName='John’">                      <p>姓名为 <span ng-bind=“firstName”></span></p>          </p
ログイン後にコピー
【ng-bind：数据绑定】
1、绑定单一变量（想看更多就到PHP中文网AngularJS开发手册中学习）
️
"firstName='John';lastName='Doe'"<p>名前: <スパン ng -bind=" 名 + ' ' + 姓 ">スパン>p >< ;/p>[実行結果:名前:Doe] 2. Jsonオブジェクトを初期化します <p ng-app= 「」 " ng-init=
"
person ={firstName:'John',lastName:'Doe'}
"><p&gと; 姓は<span ng-bind= "person.lastName">p>p >[実行結果:姓はDoe] 3、配列オブジェクトを初期化します(配列の添字は0から始まります) ng-inそれスパンクラス = ="hl- quotes">"points=[1,15,19,2,40]"><p
>
>の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. コードを作成します <option ng-repeat=
"x in names" > {{x}} <
/オプション>
<

/select

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

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

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

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

[

: AngularJSクリックイベント]

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

【

.directive

: カスタム命令の追加】

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

app.directive("runoobDirective", function() {
var app = angular.module("myApp", []);
return {
restリット;
});

2. 命令呼び出し

マーク呼び出し:
<
runoob-directive
>

<
/runoob-directive
>

プロパティへの電話:
<
p

runoob-directive
<
/p>クラス名の呼び出し:
< /p>コメント呼び出し:

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

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