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

はじめに

今日は 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: 文字列を大文字にフォーマットします。

例:

{{"aBcDeF"|大文字}}

{{"aBcDeF"|小文字}}

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
tru​​eが渡された場合に表示されるようにデフォルトで非表示


ショーかどうか?

クリックしてください!

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



クリックしてください!

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

{{ count }}

ご意見を共有してください!

 

DOM操作附录：
eg:
先导入JS文件angular.js！！！

<script src="libs/angular.js?1.1.11"></script>

JS代码：

1 angular.module("app",[])2 .controller("ctrl",function($scope,$rootScope){3 $scope.count = 10;4 $scope.func = function(){5 alert("小希真萌！");6 }7 })

 

五、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: 現在のテンプレートで実行されるコントローラー関数は、新しいスコープを生成します

今日の理論的な知識は最初にここで共有されます。お役に立てれば幸いです~~~私は初心者です、サポートに感謝します!

著者: Sunset Hope

出典:

以上がAngularJS を始めるための一般的な知識のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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