1。始まり
Angular JSは、Webページの開発に使用されるフレームワーク、テンプレート、データバインディング、およびリッチUIコンポーネントのセットです。手動DOM操作のないWebアプリケーションのアーキテクチャを提供します。 Angularjsは非常に小さく、わずか60kで、主流のブラウザと互換性があり、JQueryとうまく機能します。
2。基本原則の理解
angular Angularのいくつかの紹介
1。基本的な知識
1. AngularはIE8をあきらめました
2。4つのコアポイントは、MVC、モジュール性、命令システム、および双方向のデータバインディングです。
2。いくつかの原則
1.コントローラーを再利用しないでください。コントローラーは一般に、小さな視野のみを担当します。
2。コントローラーでDOMを操作しないでください。
3. controllerllerでデータをフォーマットしないでください。NGには優れたフォームコントロールがあります。
4.コントローラーでデータフィルタリング操作を行わないでください。$フィルターサービスがあります。
5.一般的に言えば、コントローラーは互いに呼び出されず、コントローラー間の相互作用はイベントを通じて実行されます。
6.角度は、視野を再利用するための指示を使用します。
7. $スコープは、DOMタグに平行なツリー構造です。
8。子供$スコープオブジェクトは、親$スコープのプロパティとメソッドを継承します。
9。各角度アプリケーションには、$ Rootscopeオブジェクトが1つしかありません。 （通常、NG-APPにあります）。
10。Angular.element（$ 0）.scope（）を使用してデバッグできます。
11.ビュー間のルーティングにはngrouteを使用します。
3. HTMLページの最も一般的に使用され、実用的な角張った組み込み手順
dg.ngクラス（いいねや注意などの特定のスタイルが特定の操作により変化する状況に適しています）
NGクラスのディレクティブは、1つ以上のCSSクラスをHTML要素に動的にバインドするために使用されます。 NGクラスディレクティブの値は、文字列、オブジェクト、または配列です。
文字列の場合、複数のクラス名がスペースで区切られています。
オブジェクトの場合、ブール値であるキー値ペアを使用する必要があり、値は追加するクラス名です。キーがtrueの場合にのみクラスが追加されます。
配列の場合、オブジェクトの文字列または組み合わせで構成され、配列の要素は文字列またはオブジェクトにすることができます。
使用する2つの推奨方法：
1。文字列の形式では、コードは次のとおりです。
<i ng-class = "{true： 'ion-ios-heart'、false： 'ion-ios-heartline'} [accountinfo.isfocus]" ng-click = 'wetherfocus（）'> </i>これは、iタグには、動的クラスに結合する基本的なクラスアイコンngクラスがあることを意味します。このクラスの値は、accountInfo.isfocusが真かfalsであるかどうかによって決定されます。その値が真である場合、iタグはイオンイオンハートクラスを追加します。その値が偽の場合、iタグはIon-os-heart-outslineを追加します。その値が偽の場合、iタグはIon-os-heart-outslineを追加します。
このカテゴリ。 iタグは、ngクリックイベントもバインドします。対応するロジックの処理に加えて、AccountInfo.isfocusの値も決定されます。このようにして、クリック操作が発生すると、Iタグの対応するクラスが自然に変更され、異なるスタイルが表示されます。
2。キー価値のスタイル、コードは次のとおりです。
<i ng-class = "{'ion-ios-heart'：isios、 'ion-android-heart'：isandroid}"> </i>明らかに、コードから、この意味は、ISIOSが真実である場合、イオンオイオハートクラスが取得され、ISANDROID値が真実である場合、イオンとハートのクラスが取られることがわかります。
and.ng-showとng-hide（異なる状況に2つの異なる内容を表示する場合に適しています）
ng-showディレクティブは、式が真であるときに指定されたHTML要素を表示します。それ以外の場合は、指定されたHTML要素を隠します。
ng-hideディレクティブは、式が真である場合に指定されたHTML要素を隠します。そうしないと、指定されたHTML要素が表示されます。
ハハ、それは水と火と両立しない兄弟のように見えます。 。 。 。
例は次のとおりです。
<div> <span ng-click = "togglemenu（）"> </span> </div> <div> <ul ng-show = "menustate"> ... </ul> <div ng-hide = "menustate"> ... </div>
ブール可変のメナステートを設定します（実際の開発では、式、三部作方程式などを使用できます）。それが真実である場合、NG-Showのコンテンツが表示され、Ng-Hideのコンテンツが非表示になります。それ以外の場合、逆のことが当てはまります。 。 。
③ng-switch（複数の状況で異なるコンテンツを表示するのに適しています）
ng-switchディレクティブは、式に従って対応する部分を表示または隠します。
対応する子要素は、指令の場合はNGスイッチを使用します。一致が選択されている場合は、ディスプレイを選択すると、他のものが削除されます。
NG-Switch-Defaultディレクティブを使用してデフォルトオプションを設定することにより、それらのいずれも一致しない場合、デフォルトオプションが表示されます。
例：
<div ng-switch = "essaytype"> <div ng-switch-when = "4"> ..... </div> <div ng-switch-when = "3"> ... </div> <div ng-switch-when = "1"> ... </div> <div ng-switch-when = "2"
④.ng-model（主にng-modelの魔法の小さな穴について話します）
NG-Modelディレクティブは、HTMLフォーム要素をスコープ変数にバインドします。
スコープに変数がない場合、作成されます。 ng-modelは、<inupt>、<select>、<textarea>、およびその他の要素で一般的に使用されます。
次のコード：
<div> <textarea name = "my-massage-detail" ng-model = "content" placeholder = "メッセージを入力してください
定義上、理論的に言えば、送信すると、コントローラーのページで定義されているNGモデルの値を直接取得しても構いません。しかし、実際、これは実行可能ではありません。個人テストでは、未定義の出力が出力であることがわかり、ng-modelの初期値がコントローラーで定義されている場合、変更後に最新値の代わりに初期値が取得されます。
私はいくつかの情報を検索しましたが、これは大まかにそれを意味します。角度は私たちの定義のいくつかを制限します。非プリミティブオブジェクトのみを使用してパラメーターを渡すことができます。
それはどういう意味ですか？次のように、上記の例を少し変更します。
HTMLコード：
<div> <textarea name = "my-massage-detail" ng-model = "model.content" placeholder = "メッセージを入力してください"> </textarea> <ang-click = "submitmes（）"> submit </a> </div>
コントローラーコード：
$ scope.model = {}; $ scope.model.content = ''; $ scope.submitmes = function（）{console.log（$ scope.model.content）;}つまり、オブジェクトを定義し、このオブジェクトのプロパティとしてNG-Modelを定義して、それを処理します。このようにして、NG-Modelの最新値を取得します。
別の簡単な方法は、パラメーターとしてNG-Modelを渡すだけです。
例は次のとおりです。
// html code <入力タイプ= "text" ng-model = "code"> <button ng-click = "setcode（code）"> login </button> <br> //コントローラーコード$ scope.setcode = function（code）{alert（code）;}4.データ相互作用のための実用的なスキル
約束の使用
ES6はPromiseオブジェクトを定義します。このオブジェクトは、特に背景と対話する場合に非常に便利です。コールバックが深すぎるのを防ぐだけでなく、状況によっては均一に処理することもでき、コードの読みやすさを向上させることもできます。このようなサービスは、AngularJSでもカプセル化されています。これは$ qです。
$ QはAngularJSのサービスとして存在し、Promise非同期プログラミングモードの単純化された実装にすぎません。延期オブジェクト（遅延オブジェクト）は、$ q.defer（）で取得できます。このオブジェクトには3つの方法があります。
Resolve（value）：Promiseオブジェクトの非同期実行機にメッセージを送信し、タスクを正常に完了したことを彼に伝えます。値は送信メッセージです。
拒否（値）：Promise Objectの非同期実行機にメッセージを送信し、このタスクを完了することは不可能であることを彼に伝えます。値は送信メッセージです。
Notify（value）：Promiseオブジェクトの非同期実行機関にメッセージを送信して、現在のタスク完了を伝えます。値は送信メッセージです。
これらのメッセージを送信した後、既存のコールバック関数が呼び出されます。
約束は、この延期オブジェクトを備えた約束のオブジェクトです。 Promise Objectは、Defer.Promise、いくつかの約束のオブジェクトを介して取得できます。
次に（SuccessCallback、ErrorCallback、NotifyCallback）：パラメーターは、異なるメッセージの下で異なるコールバック関数です。 Deferは、異なるコールバック関数を実行するために異なるメッセージを送信します。メッセージは、これらのコールバック関数のパラメーターとして渡されます。返品値は、チェーンコールをサポートするために存在する約束のオブジェクトに戻ります。最初の延期オブジェクトがメッセージを送信すると、その後の約束の対応する延期オブジェクトもメッセージを送信しますが、送信されたメッセージは異なります。最初の延期オブジェクトが拒否または解決を送信するかどうかに関係なく、2番目以降は解決され、メッセージは通行可能です。
catch（errorcallback）：then（null、errorcallback）。
最後に（コールバック）：thenの略語に相当します（コールバック、コールバック）。最終的にはパラメーターを受け入れませんが、次の延期によって送信されたメッセージとメッセージの種類を正常に渡すことができます。
defer（）：遅延オブジェクトを生成するために使用var defer = $ q.defer（）;
Reject（）：パラメーターはエラーメッセージを受信します。これは、コールバック関数に例外をスローし、次に間違ったコールバック関数を呼び出すことに相当します。
all（）：パラメーターは約束アレイとして受信され、新しい単一の約束オブジェクトが返されます。これらの約束オブジェクトの対応するすべての延期オブジェクトが解決されると、この単一の約束オブジェクトが解決されます。これらの約束のオブジェクトの1つが拒否されると、この単一の約束も拒否されます。
when（）：最初のパラメーターを任意の値または約束オブジェクトとして受信し、他の3は同じ約束のメソッドであり、返品値は約束オブジェクトです。最初のパラメーターがPromiseオブジェクトではない場合、成功コールバックは直接実行され、メッセージはこのオブジェクトです。それが約束である場合、返された約束は、実際にはこの約束タイプの議論のラッパーです。入ってくる約束に対応する延期によって送信されたメッセージは、When Functionによって返されたPromise Objectによって受信されます。
特定の使用法は次のとおりです。
Angularでは、相互作用に特化したサービスを定義します。
get：function（url、options）{<br> var deferred = $ q.defer（）; <br> showtip（）; $ http.get（url、options）.success（function（data）{hidetip（）; if（data.success）{deferred.resolve（data）;} else {deferred.reject（data.message）;}}）。 deferred.promise;} //コントローラーの呼び出しは（ 'url'、params）.then（function（data）{// successcallback}、function（data）{// ersercallback}）;このようにして、各リクエストが発行されたときにいくつかのプロンプトを均一に定義し、リクエストが終了した後にこれらのプロンプトを非表示にすることができます。このコードでは、一般的な意味は、リクエストが成功した場合、deferred.Resolve（データ）が成功するために呼び出されるため、STUNの最初の関数が自動的に実行されること、つまりSuccessCallback、および要求されたデータデータが渡されます。
上記は、編集者が紹介したAngularJの実践的な開発スキルです。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！