AngularJS を始めるための一般的な知識のまとめ-jsチュートリアル-php.cn

AngularJS を始めるための一般的な知識のまとめ

巴扎黑

リリース： 2017-07-23 15:07:36

オリジナル

1402 人が閲覧しました

はじめに

今日は AngularJS を一緒に学びましょう...

AngularJS は、新しい属性と式で HTML を拡張します。

AngularJSはシングルページアプリケーションを構築できます。

AngularJS は学ぶのがとても簡単です。

1. AngularJSの命令と式

【AngularJSの共通命令】
1. ng-app: Angular が管理する領域を宣言します。通常は本文または HTML に記述され、原則として 1 ページに 1 つだけ存在します。
2. ng-model: 要素の値 (入力フィールドの値など) をアプリケーション変数にバインドします。
例:
3. ng-bind: アプリケーション変数のデータを HTML ビューにバインドします。これは式で置き換えることができます。
例:

{{name}}<と同等div>
4. ng-init: AngularJS アプリケーション変数を初期化します。
例:
5. 式: {{}} バインディング式。テキスト、演算子、変数を含めることができます。
ただし、Web ページが読み込まれると式には {{}} が表示されるため、代わりに ng-bind="" を使用できます。
例:{{ 5 + "" + 5 + ',Angular' }}

[基本概念]
ディレクティブ: AngularJSではHTMLの属性を拡張することで機能を提供します。
そこで、ng-で始まる新しい属性を私たちは命令と呼びます。 2. AngularJS の MVC のスコープ

[MVC 3 層アーキテクチャ]
1. モデル:
データを処理するために使用されるアプリケーションの部分。 (データをデータベース、変数などに保存または変更します)。 AngularJS のモデルとは、特にデータを指します。
ビュー: データを表示するためにユーザーが表示するページ。
コントローラー: ユーザー操作を処理するアプリケーションの一部。ビューからのデータの読み取り、ユーザー入力の制御、モデルへのデータの送信を担当します。

2. 動作原理:
ユーザーがビューレイヤーからリクエストを送信すると、コントローラーはそれを処理のために対応するモデルに転送し、モデルの処理が完了すると結果が返されます。

3. ng-app がバインドされる部分である Angular モジュールを作成します。
①モジュール名: ng-app をバインドする必要がある名前、ng-app="myApp"
②配列: 注入する必要があるモジュールの名前。必要がない場合は空にすることもできます。
eg:var app= angular.module("myApp",[]);

Angular モジュールで、コントローラー Controller を作成し、2 つのパラメーターを渡す必要があります。
①コントローラー名、つまり ng-controller をバインドする必要がある名前。 ng-controller="myCtrl"
②Controllerd のコンストラクター: コンストラクターは、$scope/$rootScope やさまざまなシステム組み込みオブジェクトを含む複数のパラメーターを渡すことができます。 : $scopeで宣言されたローカルスコープ、プロパティ、メソッド、現在のControllerでのみ使用可能

②$rootScope: $rootScopeで宣言されたルートスコープ、プロパティ、メソッド
ngに含まれるどの領域でも使用可能-app (コントローラーと同じかコントローラーのスコープ内か)
>>> $scope を使用して変数を宣言せず、HTML 内で直接使用する場合ng-model は次のとおりです:
1. ng-model が ng-controller 内にある場合、この変数はデフォルトで現在のコントローラーの $scope にバインドされます。任意の ng コントローラーでは、この変数は $rootScope にバインドされます。 3. AngularJS フィルター

AngularJS では、パイプ文字 (|) を使用してフィルターを式やディレクティブに追加できます。

>>> システム組み込みフィルター:
通貨: 数値を通貨形式にフォーマットします。
フィルター: 配列項目からサブセットを選択します。
小文字: 文字列を小文字にフォーマットします。
orderBy: 式に従って配列を配置します。
uppercase: 文字列を大文字にフォーマットします。

例:

4. AngularJS http && select && DOM 操作

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

2. AngularJSでのSelect
①はデータソースとして配列を使用します。ここで、xは配列の各項目を表します。
デフォルトでは、x はオプションの値に直接バインドされ、オプションによって表示されるコンテンツは、前の x for.... によって決定されます。
例:

②オブジェクトをデータソースとして使用します。ここで、、 (x, y) はキーと値のペアを表します。x はキー、y は値です。
デフォルトでは、値 y はオプションの値にバインドされ、オプションによって表示されるコンテンツは、前の x for.... によって決定されます。
例:

3. AngularJS の DOM 操作
①ng-disabled="true/false"
trueを渡すとコントロールが無効になります。 falseを渡すと有効になります。

同意しますか
シャオシーはとてもかわいいです!

②ng-show
trueが渡された場合に表示されるようにデフォルトで非表示

ショーかどうか?

③ng-hide
trueが渡された場合、デフォルトの表示は非表示になります

④ng-click
は、AngularJSでクリックイベントを定義します。
Angular スコープにバインドされたプロパティとメソッドのみをトリガーできます。

五、AngularJS中的表单验证

1、表单中常见的验证操作：
$dirty:表单有填写记录
$valid:字段内容合法的
$invalid:字段内容是非法的
$pristine:表单没有填写记录
$error:表单验证不通过的错误信息

2、验证时需给表单及需要验证的input，设置name属性；
给form及input设置name后，会将form表单信息，默认绑定到$scope作用域中，故可以使用formName.inputName.$验证操作得到验证结果；
eg:
formName.inputName.$dirty="true" 表单被填写过
formName.inputName.$invalid="true" 表单输入不合法
formName.inputName.$error.required="true" 表单必填但未填
$error支持的验证有：required/minlength/maxlength/pattern/email/number/data
/url等……

3、为避免冲突，例如使用type="email"时，H5也会进行验证操作。
如果只想使用AngularJS验证，可以使用

属性，禁用H5自带验证功能。

六、AngularJS中的动画

AngularJS でのアニメーションの使用:
はアニメーション効果を提供し、CSS で使用できます。

1. AngularJS でアニメーションを使用するには、angular-animate.js ライブラリを導入する必要があります。

2. ページにカスタムモジュール (ng-app) がない場合は、システムモジュール ng-app="ngAnimate" を直接バインドできます
ページにカスタムモジュールがある場合は、モジュールの後に「ngAnimate」モジュールを挿入してカスタマイズできます。
eg:angular.module("app",["ngAnimate"])

3. 要素の表示と非表示を制御するために関連する命令を呼び出すと、対応するクラスが自動的に追加されます
ng -show/ ng-hide は、ng-hide
ng-if/ng-switch/ng-repeat およびその他の命令を削除/追加します。
表示された後、表示されるクラススタイルと非表示になるクラススタイルをそれぞれ設定する必要があります。 ng-enter-active,.ng-leave{}
非表示後: .ng-enter,.ng-leave-active{}

7. AngularJS でのルーティング

1. ルーティングを実装する js ファイル: angular-route.js を読み込みます。

2. メインアプリケーションモジュールの依存モジュールとして ngRoute モジュールが含まれています。
eg:angular.module("app",["ngRoute"])

3. ハイパーリンクをパス形式に変更します:
eg:

4. 設定で、ルーティング設定用の $routeProvider を挿入します:
$routeProvider
.when('/',{template:'これはホームページです'})
.when('/page1',{template:'これは page1'})
.when('/page2',{template:'これは page2'})
.when( '/page3' ,{template:'これは page3 ページです'})
.otherwise({redirectTo:'/'});
})
5. ページの適切な場所に ng- を追加します。、開かれたページをホストするために使用されます

[ルーティングパラメータオブジェクトのオプションの属性]
1.tempalte: ng-view にロードされるカスタム HTML テンプレート
2.tempalteUrl: 外部 HTML との競合を避けるために、コードを本文内に保持するだけで済みます。 3.redirectTo: 特定のページにリダイレクトします。通常は .otherwise(); で使用されます。
4.controller: 現在のテンプレートで実行されるコントローラー関数は、新しいスコープを生成します