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. 単一の変数を初期化します

<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=&#39;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はボタンが利用できることを意味します

• 【
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. 命令呼び出し

  マーク呼び出し:

  <

  runoob-directive

  >

  <

  /runoob-directive

  >

  プロパティへの電話:

  <

  p

  runoob-directive

>

• <

  /p>クラス名の呼び出し:

  < /p>コメント呼び出し:

  

  ホットAIツール

  

  Undresser.AI Undress

  リアルなヌード写真を作成する AI 搭載アプリ

  

  AI Clothes Remover

  写真から衣服を削除するオンライン AI ツール。

  

  Undress AI Tool

  脱衣画像を無料で

  

  Clothoff.io

  AI衣類リムーバー

  

  Video Face Swap

  完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

  もっと見る
  

  人気の記事

  アサシンのクリードシャドウズ：シーシェルリドルソリューション

  3週間前 By DDD

  Windows11 KB5054979の新しいものと更新の問題を修正する方法

  2週間前 By DDD

  アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法

  1 か月前 By DDD

  Atomfallのクレーンコントロールキーカードを見つける場所

  3週間前 By DDD

  <🎜>：Dead Rails-すべての課題を完了する方法

  3週間前 By DDD

  もっと見る
  

  ホットツール

  

  メモ帳++7.3.1

  使いやすく無料のコードエディター

  

  SublimeText3 中国語版

  中国語版、とても使いやすい

  

  ゼンドスタジオ 13.0.1

  強力な PHP 統合開発環境

  

  ドリームウィーバー CS6

  ビジュアル Web 開発ツール

  

  SublimeText3 Mac版

  神レベルのコード編集ソフト（SublimeText3）

  もっと見る
  

  ホットトピック

  Gmailメールのログイン入り口はどこですか？

  7643

  15

  CakePHP チュートリアル

  1392

  52

  Steamのアカウント名の形式は何ですか

  91

  11

  Win11 Activation Key Permanent

  72

  19

  NYTの接続はヒントと回答です

  33

  151

  もっと見る