AngularJ を学ぶにはどうすればよいですか? angularjs の知識についての最も包括的な入門書

この記事ではangularjsの学習方法について詳しく説明しています。忘れているかもしれない知識点がたくさんあるので、今すぐ読んで思い出してください。今すぐこの記事を読み始めましょう

Angular Js は Javascript フレームワークであり、JavaScript で書かれたライブラリです。
AngularJS モジュール (Module) は AngularJS アプリケーションを定義します。
AngularJS コントローラー (コントローラー) は、AngularJS アプリケーションを制御するために使用されます。
ng-app ディレクティブはアプリケーションを定義し、ng-controller はコントローラーを定義します。
AngularJS は HTML を拡張します
AngularJS は ng-ディレクティブを通じて HTML を拡張します。
ng-app ディレクティブは、AngularJS アプリケーションを定義します。
ng-model ディレクティブは、要素の値 (入力フィールドの値など) をアプリケーションにバインドします。
ng-bind ディレクティブは、アプリケーション データを HTML ビューにバインドします。
AngularJS は式を使用してデータを HTML にバインドします
AngularJS とは何ですか?
AngularJS を使用すると、最新のシングル ページ アプリケーション (SPA: シングル ページ アプリケーション) の開発が容易になります。
AngularJS アプリケーション データを HTML 要素にバインドします。
AngularJS は HTML 要素を複製して繰り返すことができます。
AngularJS は HTML 要素を非表示にしたり表示したりできます。
AngularJS は HTML 要素の「後ろ」にコードを追加できます。
AngularJS は入力検証をサポートしています。
AngularJS ディレクティブは、ng というプレフィックスが付いている HTML 属性です。
ng-init ディレクティブは、AngularJS アプリケーション変数を初期化します。
HTML5 では、data- から始まる拡張 (自家製) 属性が許可されています。
AngularJS 属性は ng- で始まりますが、data-ng- を使用してページを HTML5 で有効にすることができます。
AngularJS 式は二重中括弧内に記述されます: {{ 式 }}。
AngularJS 式はデータを HTML にバインドします。これは ng-bind ディレクティブに似ています。
AngularJS は式が記述された場所にデータを「出力」します。
AngularJS 式は JavaScript 式によく似ており、リテラル、演算子、変数を含めることができます。
例 {{ 5 + 5 }} または {{ firstName + " " + lastName }}
AngularJS 式と JavaScript 式
JavaScript 式と同様に、AngularJS 式には文字、演算子、変数を含めることができます。
JavaScript 式とは異なり、AngularJS 式は HTML で記述できます。
JavaScript 式とは異なり、AngularJS 式は条件判断、ループ、例外をサポートしません。
JavaScript 式とは異なり、AngularJS 式はフィルターをサポートします。


AngularJS ディレクティブ


AngularJS は、ディレクティブと呼ばれる新しい属性で HTML を拡張します。
AngularJS は、組み込みディレクティブを通じてアプリケーションに機能を追加します。
AngularJS を使用すると、ディレクティブをカスタマイズできます。
AngularJS ディレクティブは、ng- という接頭辞が付いた拡張 HTML 属性です。
ng-app ディレクティブは、AngularJS アプリケーションを初期化します。 ng-app ディレクティブは、

要素が AngularJS アプリケーションの「所有者」であることを AngularJS に伝えます。
ng-init ディレクティブはアプリケーションデータを初期化します。
ng-model ディレクティブは、要素の値 (入力フィールドの値など) をアプリケーションにバインドします。


ng-app ディレクティブ
ng-app ディレクティブは、AngularJS アプリケーションのルート要素を定義します。
ng-app ディレクティブは、Web ページが読み込まれるときにアプリケーションを自動的に起動 (自動的に初期化) します。
後で、ng-app が値 (ng-app="myModule" など) を介してコード モジュールに接続する方法を学びます。


ng-init ディレクティブ
ng-init ディレクティブは、AngularJS アプリケーションの初期値を定義します。
通常、ng-initは使用されません。代わりにコントローラーまたはモジュールを使用します。


ng-model ディレクティブ
ng-model ディレクティブ HTML 要素をアプリケーション データにバインドします。
ng-model ディレクティブは、アプリケーション データを HTML コントローラー (入力、選択、テキストエリア) の値にバインドするために使用されます。
ng-model ディレクティブでは次のこともできます。
アプリケーション データの型検証 (番号、電子メール、必須) を提供します。
アプリケーションデータのステータス (無効、ダーティ、タッチ、エラー) を提供します。
HTML要素のCSSクラスを提供します。
HTML 要素を HTML フォームにバインドします。


ng-repeat ディレクティブ
ng-repeat ディレクティブは、コレクション (配列) 内の項目ごとに HTML 要素を 1 回複製します。


カスタム ディレクティブを作成する
AngularJS の組み込みディレクティブに加えて、カスタム ディレクティブも作成できます。
.directive 関数を使用してカスタム ディレクティブを追加できます。
カスタム命令を呼び出すには、カスタム命令名を HTML 要素に追加する必要があります。
ディレクティブに runoobDirective という名前を付けるにはキャメルケースを使用しますが、使用する場合は runoob-directive: で区切る必要があります。

使用制限
ディレクティブを特定の方法でのみ呼び出すように制限できます。
restrict 値は次のとおりです:
E 要素名として使用
A 属性として使用
C クラス名として使用
M コメントとして使用
restrict デフォルト値は E および A です。つまり、命令は要素名と属性名。


AngularJS コントローラー
AngularJS アプリケーションはコントローラーによって制御されます。
ng-controller ディレクティブはアプリケーション コントローラーを定義します。
コントローラーは、標準の JavaScript オブジェクト コンストラクターによって作成される通常の JavaScript オブジェクトです。


AngularJS フィルター
AngularJS フィルターはデータの変換に使用できます:
Filter
説明
currency
数値を通貨形式にフォーマットします。
フィルター
配列項目からサブセットを選択します。
小文字
文字列を小文字にフォーマットします。
orderBy
式に基づいて配列を順序付けします。
大文字
文字列を大文字にフォーマットします。
フィルターは、パイプ文字 (|) とフィルターを介して式に追加できます。


AngularJS サービス
AngularJS では、独自のサービスを作成したり、組み込みサービスを使用したりできます。


サービスとは何ですか?
AngularJS では、サービスは AngularJS アプリケーションで使用できる関数またはオブジェクトです。
AngularJS には 30 以上の組み込みサービスがあります。
現在のページの URL アドレスを返すことができる $location サービスがあります。


$http は AngularJS のコア サービスで、リモート サーバーからデータを読み取るために使用されます。


ng-repeat ディレクティブは、配列を介して HTML コードをループしてドロップダウン リストを作成しますが、ng-options ディレクティブは、次の利点があります。 ng-options を使用するオプションのうち、ng-repeat は文字列です。


ng-show ディレクティブは、HTML 要素を非表示または表示します。
ng-disabled ディレクティブは、アプリケーション データ「mySwitch」を HTML の disabled 属性にバインドします。
ng-model ディレクティブは、「mySwitch」を HTML 入力チェックボックス要素のコンテンツ (値) にバインドします。
mySwitch が true の場合、ボタンは無効になります:
ng-hide ディレクティブは、HTML 要素を非表示または表示するために使用されます。

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

HTML要素を非表示にする
ng-hideディレクティブは、アプリケーション部分を表示するかどうかを設定するために使用されます。
ng-hide="true" は、HTML 要素を非表示に設定します。
ng-hide="false" は、HTML 要素を表示するように設定します。

ng-show ディレクティブを使用して、アプリケーションの一部を表示するかどうかを設定できます。
ng-show="false" は、HTML 要素を非表示に設定できます。
ng-show="true" は、HTML 要素を表示するように設定できます。


AngularJS モジュール

モジュールはアプリケーションを定義します。
モジュールは、アプリケーションのさまざまな部分のコンテナです。
モジュールはアプリケーション コントローラーのコンテナーです。
コントローラーは通常、モジュールに属します。


JavaScript ではグローバル関数は避けるべきです。他のスクリプト ファイルによって簡単に上書きされる可能性があるためです。
AngularJS モジュールは、すべての関数をこのモジュールの下にスコープし、この問題を回避します。


HTML コントロール
次の HTML 入力要素は HTML コントロールと呼ばれます:
input 要素
select 要素
button 要素
textarea 要素


AngularJS で推奨されるスタイル シートは Twitter Bootstrap であり、Twitter Bootstrap が現在最も人気のあるフロントです。 -end フレームワーク 。

AngularJS アニメーション
AngularJS は、CSS で使用できるアニメーション効果を提供します。
AngularJS でアニメーションを使用するには、angular-animate.min.js ライブラリを導入する必要があります。

ngAnimate は何をしますか?
ngAnimate モデルはクラスを追加または削除できます。
ngAnimate モデルは HTML 要素をアニメーション化できませんが、HTML 要素の非表示や表示などのイベントを監視します。イベントが発生すると、ngAnimate は事前定義されたクラスを使用して HTML 要素をアニメーション化します。
クラスを追加/削除するための AngularJS 命令:
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
ng-show および ng-hide ディレクティブng-hide クラスの値を追加または削除するために使用されます。
他の命令では、DOM に入るときに ng-enter クラスが追加され、DOM を削除するときに ng-leave 属性が追加されます。
HTML 要素の位置が変更されると、ng-repeat ディレクティブで ng-move クラスを追加することもできます。
また、アニメーションが完了すると、HTML 要素のクラス コレクションが削除されます。例: ng-hide ディレクティブは次のクラスを追加します:
ng-animate
ng-hide-animate
ng-hide-add (要素が非表示になる場合)
ng-hide-remove (要素が非表示になる場合)表示されます)
ng-hide -add-active (要素が非表示になる場合)
ng-hide-remove-active (要素が表示される場合)


value
Value は、値を渡すために使用される単純な JavaScript オブジェクトです。コントローラーへの送信 (構成フェーズ):


factory
factory は値を返す関数です。サービスとコントローラーによって必要に応じて作成されます。
通常、値を計算したり返したりするにはファクトリー関数を使用します。


プロバイダー
AngularJS のプロバイダーを通じてサービス、ファクトリーなどを作成します (構成フェーズ)。
プロバイダーは、値/サービス/ファクトリーを返すために使用されるファクトリー・メソッド get() を提供します。


constant
constant (定数) は、構成フェーズ中に値を渡すために使用されます。この定数は構成フェーズでは使用できないことに注意してください。
mainApp.constant("configParam", "constant value");


AngularJS ルーティング
AngularJS ルーティングを使用すると、異なる URL を介して異なるコンテンツにアクセスできます。
マルチビューのシングルページ Web アプリケーション (SPA) は、AngularJS を通じて実装できます。
通常、URL は http://runoob.com/first/page の形式ですが、単一ページの Web アプリケーションでは、AngularJS は # + タグを通じてそれを実装します。


AngularJS モジュールの config 関数は、ルーティング ルールを構成するために使用されます。 configAPI を使用することで、$routeProvider が設定関数に挿入されるように要求し、$routeProvider.whenAPI を使用してルーティング ルールを定義します。
$routeProvider は、すべてのルートを順番に定義するための when(path,object) & else(object) 関数を提供します。この関数には 2 つのパラメーターが含まれています。
最初のパラメーターは URL または URL の通常のルールです。
2 番目のパラメータはルーティング設定オブジェクトです。

ルート設定オブジェクト
AngularJS ルーティングは、さまざまなテンプレートを通じて実装することもできます。
$routeProvider.when 関数の最初のパラメーターは URL または URL の通常のルールで、2 番目のパラメーターはルーティング設定オブジェクトです。


template:
ng-view に単純な HTML コンテンツを挿入するだけの場合は、次のパラメータを使用します:
.when('/computers',{template:'これはコンピュータ カテゴリ ページです'})
templateUrl:
HTML テンプレート ファイルを ng-view に挿入するだけの場合は、次のパラメータを使用します:
$routeProvider.when('/computers', {
templateUrl: 'views/computers.html',
});


上記のコードは、views/computers.html ファイルの内容をサーバーから取得し、ng-view に挿入します。


controller:
関数、文字列または配列型、新しいスコープを生成するために現在のテンプレートで実行されるコントローラー関数。


controllerAs:
文字列型、コントローラーのエイリアスを指定します。


redirectTo:
リダイレクトされたアドレス。


resolve:
現在のコントローラーが依存する他のモジュールを指定します。

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

以上がAngularJ を学ぶにはどうすればよいですか? angularjs の知識についての最も包括的な入門書の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。