ホームページ ウェブフロントエンド jsチュートリアル AngularJS構文の詳しい説明_AngularJS

AngularJS構文の詳しい説明_AngularJS

May 16, 2016 pm 04:18 PM
angularjs 文法

テンプレートとデータの基本的な操作プロセスは次のとおりです:

ユーザーがアプリケーションの開始ページをリクエスト
ユーザーのブラウザはサーバーへの http 接続を開始し、テンプレート
を含むindex.html ページをロードします。 Angular はページにロードされ、ページがロードされるのを待ち、テンプレート
の境界を定義するために使用される ng-app ディレクティブを探します。 Angular はテンプレートを走査して、指定されたバインディング関係を見つけます。これにより、リスナーの登録、一部の DOM 操作の実行、サーバーからの初期化データの取得という一連のアクションがトリガーされます。最後に、アプリケーションが起動し、テンプレートを DOM ビューに変換します
サーバーに接続して、ユーザーに表示する必要がある他のデータをロードします

テキストを表示

1 つは {{greeting}} などの {{}} フォームを使用し、2 番目は ng-bind="greeting"

レンダリングされていないページは最初の方法を使用します。インデックス ページには 2 番目の方法を使用することをお勧めします。

フォーム入力

コードをコピーします コードは次のとおりです:


<頭>
フォーム

<スクリプトタイプ="text/javascript">
関数 StartUpController($scope) {
$scope.funding = {startingEstimate:0};
computeNeeded = function() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.$watch('funding.startingEstimate',computeNeeded) //監視モデルの変更
}




開始: //変更時に関数を呼び出します
推奨事項: {{funding.needed}}



場合によっては、変化があったときにすぐに行動を起こしたくない場合もありますが、待つ必要があります。例:

コードをコピーします コードは次のとおりです:


<頭>
フォーム

<スクリプトタイプ="text/javascript">
関数 StartUpController($scope) {
$scope.funding = {startingEstimate:0};
computeNeeded = function() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.$watch('funding.startingEstimate',computeNeeded);//watch は式を監視し、式が変化するとコールバック関数が呼び出されます
$scope.requestFunding = function() {
window.alert("申し訳ありませんが、まず顧客を増やしてください。")
};
}



//ng-submit
開始:
推奨事項: {{funding.needed}}
&lt; button&gt;私のスタートアップに資金を提供します!&lt;/button&gt;



非表单提交型のやり取り、クリックして例を表示します

复制代 代码如下:


<頭>
    表单
   
    <スクリプトタイプ="text/javascript">
    function StartUpController($scope) {
        $scope.funding = {startingEstimate:0};
        computeNeeded = function() {
            $scope.funding.needed = $scope.funding.startingEstimate * 10;
        };
        $scope.$watch('funding.startingEstimate',computeNeeded);
        $scope.requestFunding = function() {
            window.alert("申し訳ありませんが、まず顧客を増やしてください。")
        };
        $scope.reset = function() {
            $scope.funding.startingEstimate = 0;
        };
    }
   


   

        開始:
        推奨事項: {{funding.needed}}
       
       
   



列表、表格およびその他の代型要素

ng-repeat は、$index を介して、現在参照されている要素シーケンス番号を返します。コードの例は次のとおりです。

复制代 代码如下:

<頭>
    表单
   
    <スクリプトタイプ="text/javascript">
    var students = [{name:'Mary',score:10},{name:'Jerry',score:20},{name:'Jack',score:30}]
    function StudentListController($scope) {
        $scope.students = 学生;
}

   


   


       
           
           
           
       
   



隐藏与显示

ng-show と ng-hide の機能は同等ですが、実行効果はむしろ優れています。

复制代码代码如下:


<頭>

<スクリプト>
function DeathrayMenuController($scope) {
$scope.menuState = {show:false};//ここでmenuState.show = falseに変更するとエフェクトは表示されなくなります。将来的には、変数を {}
内で宣言することをお勧めします。 $scope.toggleMenu = function() {
$scope.menuState.show = !$scope.menuState.show;
};
}






  • 気絶

  • 分解

  • 履歴から消去





CSS クラスとスタイル

ng-class と ng-style は両方とも式を受け入れることができます。式の実行結果は次のいずれかの値になります。

スペースで区切られた CSS クラス名を表す文字列
CSS クラス名配列
CSS クラス名のブール値へのマッピング
コード例は次のとおりです:

コードをコピーします コードは次のとおりです:


<頭>


<スクリプト>
function HeaderController($scope) {
$scope.isError = false;
$scope.isWarning = false;

$scope.showError = function() {
$scope.messageText = "エラー!!!!"
$scope.isError = true;
$scope.isWarning = false;
}

$scope.showWarning = function() {
$scope.messageText = "警告!!!"
$scope.isWarning = true;
$scope.isError = true;
}
}




{{messageText}}






CSS クラス名のブール値へのマッピング
サンプルコードは次のとおりです:

コードをコピー コードは次のとおりです:


<頭>


<スクリプト>
関数レストラン($scope) {
$scope.list = [{name:"ハンサム",cuisine:"BBQ"},{name:"グリーン",cuisine:"サラダ"},{name:"ハウス",cuisine:'シーフード'}];

$scope.selectRestaurant = function(row) {
$scope.selectedRow = row;
}
}



{{$index 1}}{{学生名}}{{student.score}}

//CSS クラス名をブール値にマッピング、モデル属性 selectedRow の値が ng-repeat の $index と等しい場合、選択されたスタイルがその行に設定されます
                                                                                                                                                                                                   





このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Python コードをすばやく API に変換する方法 Python コードをすばやく API に変換する方法 Apr 14, 2023 pm 06:28 PM

API 開発といえば、DjangoRESTFramework、Flask、FastAPI を思い浮かべるかもしれません。はい、これらを使用して API を作成できます。しかし、今日共有されたフレームワークを使用すると、既存の関数をより速く API に変換できます。それが Sanic です。 Sanic の概要 Sanic[1] は、パフォーマンスを向上させるために設計された Python3.7 以降の Web サーバーおよび Web フレームワークです。これにより、Python 3.5 で追加された async/await 構文を使用できるようになり、ブロックを効果的に回避し、応答速度を向上させることができます。 Sanic は、簡単かつ迅速に作成して起動する方法を提供することに尽力しています。

PHP8.0 の新しい型エイリアス構文 PHP8.0 の新しい型エイリアス構文 May 14, 2023 pm 02:21 PM

PHP 8.0 のリリースでは、新しい型のエイリアス構文が追加され、カスタム型の使用が容易になりました。この記事では、この新しい構文とそれが開発者に与える影響について詳しく見ていきます。型エイリアスとは何ですか? PHP では、型エイリアスは基本的に、別の型の名前を参照する変数です。この変数は他の型と同様に使用でき、コード内の任意の場所で宣言できます。この構文の主な機能は、一般的に使用される型のカスタム エイリアスを定義して、コードを読みやすく理解しやすくすることです。

ラムダ式の構文と構造の特徴は何ですか? ラムダ式の構文と構造の特徴は何ですか? Apr 25, 2024 pm 01:12 PM

ラムダ式は名前のない匿名関数であり、その構文は (parameter_list)->expression です。匿名性、多様性、カリー化、閉鎖性が特徴です。実際のアプリケーションでは、ラムダ式を使用して、合計関数 sum_lambda=lambdax,y:x+y などの関数を簡潔に定義し、map() 関数をリストに適用して合計演算を実行できます。

入門から習得まで、2022 年の最新 5 つの angularjs チュートリアル 入門から習得まで、2022 年の最新 5 つの angularjs チュートリアル Jun 15, 2017 pm 05:50 PM

Javascript は、コードの構成、コードのプログラミング パラダイム、およびオブジェクト指向理論の点で非常にユニークな言語です。しかし、JavaScript が 20 年間主流であったとはいえ、jQuery、Angularjs、さらには React などの人気のあるフレームワークを理解したい場合は、「Black Horse Cloud Classroom JavaScript Advanced Framework」を見てください。デザインビデオチュートリアル」。

PHP と AngularJS を使用して応答性の高い Web サイトを構築し、高品質のユーザー エクスペリエンスを提供します PHP と AngularJS を使用して応答性の高い Web サイトを構築し、高品質のユーザー エクスペリエンスを提供します Jun 27, 2023 pm 07:37 PM

今日の情報化時代において、ウェブサイトは人々が情報を入手し、コミュニケーションを図るための重要なツールとなっています。レスポンシブな Web サイトはさまざまなデバイスに適応し、ユーザーに高品質のエクスペリエンスを提供できます。これは、現代の Web サイト開発のホットスポットとなっています。この記事では、PHP と AngularJS を使用して応答性の高い Web サイトを構築し、高品質のユーザー エクスペリエンスを提供する方法を紹介します。 PHP の概要 PHP は、Web 開発に最適なオープンソースのサーバー側プログラミング言語です。 PHP には、学びやすさ、クロスプラットフォーム、豊富なツール ライブラリ、開発効率など、多くの利点があります。

Go言語とJSの関係と違い Go言語とJSの関係と違い Mar 29, 2024 am 11:15 AM

Go 言語と JS の関係と違い Go 言語 (Golang とも呼ばれます) と JavaScript (JS) は現在人気のあるプログラミング言語であり、これらはある面では関連していますが、他の面では明らかな違いがあります。この記事では、Go 言語と JavaScript の関係と違いを探り、読者がこれら 2 つのプログラミング言語をよりよく理解できるように具体的なコード例を示します。接続: Go 言語と JavaScript は両方ともクロスプラットフォームであり、異なるオペレーティング システム上で実行できます。

PHP8.0の親クラス呼び出し構文 PHP8.0の親クラス呼び出し構文 May 14, 2023 pm 01:00 PM

PHP は Web 開発で広く使用されているサーバー側スクリプト言語であり、PHP8.0 バージョンでは、オブジェクト指向プログラミングをより便利かつ簡潔にするための新しい親クラス呼び出し構文が導入されています。 PHP では、継承を通じて親クラスと 1 つ以上のサブクラスを作成できます。サブクラスは親クラスのプロパティとメソッドを継承でき、親クラスのメソッドをオーバーライドすることで機能を変更または拡張できます。通常のPHPの継承では、サブクラス内で親クラスのメソッドを呼び出したい場合は、parentキーワードを使用して親を参照する必要があります。

PHP と AngularJS を使用して Web アプリケーションを構築する PHP と AngularJS を使用して Web アプリケーションを構築する May 27, 2023 pm 08:10 PM

インターネットの継続的な発展に伴い、Web アプリケーションは企業情報構築の重要な部分となり、最新化作業に必要な手段となりました。 Web アプリケーションの開発、保守、拡張を容易にするために、開発者は開発ニーズに合った技術フレームワークとプログラミング言語を選択する必要があります。 PHP と AngularJS は非常に人気のある 2 つの Web 開発テクノロジであり、それぞれサーバー側とクライアント側のソリューションであり、これらを組み合わせて使用​​すると、Web アプリケーションの開発効率とユーザー エクスペリエンスを大幅に向上させることができます。 PHPPHPの利点

See all articles