概要：三つのフレームワーク入門
1、AngularJSは、それが優れたフロントエンドJSのフレームワークであり、2009年に生まれました。Googleが取得されます。
図2に示すように、ReactJSは、2013年に生まれた優れたフロントエンドJSフレームワークです。Facebookの社内プロジェクトから。
図3に示すように、VueJSは、2014年に生まれた優れたフロントエンドJSフレームワークです。著者は、特に川雨。
また：背景にリクエストを発行する前に、（1）ヒントを行うには二つのものがあります：確認要求は、（2）円形の動き：要求を待っている結果
、角度の概要
https://www.cnblogs.com/xuan52rock/詳細AngularJS実行フローをP / 4788727.html
NG（コアModule1の）AngularJSデフォルト・モジュールであって、AngularJSのすべてのコア・コンポーネント
を使用する（1）グローバル関数（関数）：angular.forEachを（）。
（2）指令（指令）として使用：内蔵命令"= NGクリックし、A" B、自己指示app.directive（ 'selfCreate'、関数（ ）{}）。
（3）サービス（ -サービス）の使用は:. Aは、組み込みのサービスの$のHTTP B、セルフサービスapp.service（ 'selfCreate'、関数（ ）{}）。
（4）フィルター（フィルター）の使用である：{{totalMoney（）|通貨 ： "¥"}}。
第二に、グローバル関数
1、angular.copy、angular.mergeとangular.extend
angular.copy（ソース、[あなたがしたいですか]）（1）;
キー（又はアイテム）のソースがデスティネーションにクローニングしました。オリジナルキーの宛先は、コピーまたは上書きされ、そうでない場合、送信元および宛先タイプ、例外がスローされます。この方法の効果は：オブジェクトまたは配列のコピー;戻り値：オブジェクトのコピーまたは更新します。
（2）angular.extend（デスティネーション、ソース ）; "浅いコピー"。
ソース値のペアは、先にクローニングしました。元のキーと値のペアの先には、コピーまたは上書きされます。このメソッドの役割は次のとおりです。先のオブジェクトの属性にソースオブジェクトをコピーし、複数のソース・オブジェクトのサポート;戻り値：オブジェクトをコピーした後、あなたが変更したくない場合VARオブジェクト= angular.extend（：オブジェクトは、空のオブジェクト{}宛先を設定することができ 、{}、物体1、オブジェクト2）。先のオブジェクトを返します。
（3）angular.merge（デスティネーション、ソース ）、 "ディープコピー"。
ソース値のペアは、先にクローニングしました。元のキーと値のペアの先がコピーまたは上書きされます。このメソッドの役割は次のとおりです、先のオブジェクトの属性に複数のソース・オブジェクトのサポートをソースオブジェクトをマージ;戻り値：オブジェクトがマージされ、あなたが変更したくない場合VARオブジェクト= angular.merge（：オブジェクトは、空のオブジェクト{}宛先を設定することができ 、{}、物体1、オブジェクト2）。先のオブジェクトを返します。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>の角度</タイトル>
ます。<script type = "text / javascriptの" SRC = "https：//でcdn.bootcss.com/angular.js/1.5.8/angular.js "> </ SCRIPT>
</ head>
<body>
</ body>
</ HTML>
<スクリプト>
VARソース= {1、B ：2}。
VAR先= {2、B 3、C 3、D 4}。
VAR最後= angular.copy（ソース）。
console.log（宛先）。
console.log（最後）。
/ * VAR先= {2、B 3、C 3、D 4}。
VARソース= {1、B：2}。
VAR最後= angular.extend（デスティネーション、ソース）。
console.log（宛先）。
console.log（最後）。
VAR先= {2、B 3、C 3、D 4}。
VARソース= {1、B：2}。
VAR最後= angular.merge（デスティネーション、ソース）。
console.log（宛先）。
console.log（最後の）; * /
</ SCRIPT>
2、およびカスタムスコープのカスタムHTML結合
VAR myTemplateScope = angular.extend（$ RootScope。 $新しい（）、customMethodObject（ のみカスタムHTMLのために使用される方法の内側に格納されている））;
angular.element（「＃MyTemplateに「）.append（$コンパイル（angular.element （customHtml））（myTemplateScope））;
jQueryを使用できない、angular.elementはHTML DOM要素の文字列またはパラメータを受け入れる場合。
3、angular.module（「アプリ」、 [「」、「」、「」]） プリロードされた噴射器モジュールによって現在の前にロードされるの必要に依存しているモジュールを、登録および検索するために使用されます。渡されたパラメータの2以上の場合は、新しいモジュールを作成します。唯一つのパラメータが渡された場合、既存のモジュールが取得されます。angular.module（「アプリ」、[「 ui.router」、「共通DIR」]）; <素子NGアプリ=「モジュール名」>; もし同じモジュール名と属性値NGアプリ、次いでモジュールアプリケーションモジュールがあり、他のモジュールは共通モジュールです。
4、angular.config（関数（$ urlRouterProvider ;）{$ urlRouterProvider.otherwise（ '/ログイン'）}） モジュールをロードする段階で、モジュールのカスタム設定
角度5。
。6、angular.element：
（1）jQueryの導入場合、関数のjQueryを使用することができるオブジェクトを選択するangular.element jQueryのセレクタとして見ることができる。angular.element（ "＃pを"） ; $（「＃ P「）。すべての要素は、角度やjqLite jQueryオブジェクトではなく、オリジナルのDOM要素を参照されています。
jQueryの、文字列またはangular.elementを導入していない場合（2）のみHTML DOM元のパラメータ要素を受け入れ、角度jqLite関数で選択された要素のみを呼び出すことができ、angular.element（のdocument.getElementById（「P」 ） ;。angular.element（のdocument.createElement（ "P "））
第三に、説明書
"ディレクティブangular1" 1、角度のカスタム詳細な手順を参照してくださいhttps://www.qdfuns.com/article/40901/ff3914413de19107ec095345d0d5c214.html
2、AngularJSデータバインディング：$スコープのタグが変更され、ページの再レンダリングのみの属性値NG-モデルが結合双方向で、他の変数は、（ウェイバインディングウェイバインディングNG-モデルです。..変数$スコープに結合されたHTMLフォーム要素）アクションのコース：の<input type = "text" NG -model = "名前"> {{名前}} 例：
（1）入力されたスコープ名がここで名前を割り当てることが宣言されている場合には、NG-モデルは、その値を取得し、入力に出力します。{{名前}}この値は、ページが表示されますています。ながら、{{名前が}}また、名前の値によって覆われている内部値、NGモデルドメイン名の値の修正効果は、ページ上の元の名前の値を変更する入力。
入力スコープなし宣言名と（2）は、NG-モデルは、スコープステートメントで名前であろう。入力値がそこ入力された場合、{{名前}}は、ページ上に出力されている間、名前NGモデルは、割当ての範囲内であろう。
（3）原理：NG-モデルを、入力タグのtype属性の値に応じて、例えばのOnChangeなどのユーザ入力イベントを監視し、onkeyupの、onKeyDownメソッド。
3、NGバインド（アレイ、三元共重合体）、NG-クラス（オブジェクトの配列。三重を実行しない）、NG-スタイル（3元）及びNG-SRC（3元二重括弧）使用例
<TDのNGバインド= "[ 'が接続されていない'、 '接続'] [li.status]"> </ TD>
<TD =バインドNG "interfaceState.eth0。1 == '接続'：？ '接続されていない'"> </ TD>
<TD = NGクラス"[ 'プライマリ-BG'、 'BG-危険'] [li.status]"> </ TD>
<TDのNGクラス=「{ 'プライマリ-BG' == li.status = 1、 'BG-危険' ：li.statusの=== 0、
<TDのNGスタイル= "？ interfaceState.eth0 == 1 { '色'： 'ブラック'}：{ '色'： '赤'}"> 接続</ TD>正常である書か複数の属性：{ '色' ： '赤'、 '背景'： 'グリーン'}
<IMG-ngのSRC = "ABC == {{DEF :?パス2パス1}}" Altキー= "" />
<！DOCTYPE HTML>
<HTML LANG = "EN" NG-アプリ= "appModule">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>タイトル</ TITLE>
</ HEAD>
<BODY>
<Pこんにちは> </ P>
<スクリプトSRC = "./ angular.js "> </ SCRIPT>
<SCRIPT>
VARアプリ= angular.module（" appModule"、[]）。
app.directive（ "ハロー"、関数（）{
リターン{
制限： "EACM"を、
範囲：{}、
templateUrl： "./2.html"、
コントローラ：関数（$範囲）{
$ scope.colorA = $範囲.colorA $ scope.colorA：？ "グリーン"。
？$ scope.colorB = $ scope.colorB $ scope.colorB： "グリーン"。
}
}
}）。
</スクリプト>
</ BODY>
</ HTML>
2.html
<DIV>
<DIV NG-スタイル= "{ 'カラー'：colorAは}">接続が正常である</ DIV>
<DIV NGスタイル= "{ 'カラー'：colorBの= '赤'}">接続が正常である</ DIV >
</ div>
4、NGリピート：配列またはオブジェクト、横断する
$ scope.arrayOrObject =を[ "F"、 "A"、,. 3」1" ];
$ scope.arrayOrObject = {:. 1、B： "B"、 C：」3" };
（1）< "arrayOrObjectで（キー、値）" TR NG-REPEAT => <TD> {{キー}}、{{値}} </ TD> </ TR>、
とアレイを介してフォーマットは、キー値が各項目の値であり、各項目の指標です。
この形式でオブジェクトを横断し、各項目のキー属性の名前、値は、各アイテムの属性値です。
（2）<TR NGリピート "arrayOrObjectの項目" => <TD> {{アイテム}} </ TD> </ TR>、
この形式の反復、アイテム配列内のすべての項目、
これにオブジェクトフォーマットを横断、アイテムは、各オブジェクトの属性値。
5、NG-場合、ng-非表示、NG-ショーの使い方
（1）NG-場合、条件が偽の場合は、 "削除" HTML要素、。
（2）NG-ショー条件が偽の場合は、「隠す」HTML要素、。
（3）ngの非表示条件がtrueの場合は、「隠す」HTML要素、。
さらに<スパン> protonum {{}} </スパン>
<IMG SRC = ""
（2）ここで、JS、1 +未定義の演算結果は、デジタルNaNです。
3つの結合方法の6.比較：そこには二次的ではありませんか$は$のSCEをサニタイズ場合、NG-バインドhtmlの力ではありません。
（1）NG-バインドhtmlとサードパーティラインに注入ngSanitizeモジュールを、サービスは、$のサニタイズhtmlタグが自動的にクリーンアップされますサニタイズ$を注入し、タグを入れて、要素のシフトに結合事象属性はありませんまた、タグのみとコンテンツを保持。
Module1の（ "て、myApp"、[ 'ngSanitizeは']）; / *コードJS、リスト上の注入ngSanitizeサードパーティのモジュールは、HTMLでNG-バインドHTMLを使用することができ、サニタイズサービス$を挿入しないでください。* /
App.controller（ "myCtrl"、機能（$スコープ）{
$ scope.myTextは= "私の名前は次のとおりです。<H1スタイル= '色：赤'>ジョン・ドウ</ H1>";
}）;
</ SCRIPT>
（2）NG-バインドhtmlと内蔵$ sce.trustAsHtml（）、そのすべてのプロパティおよびイベントを保持して、直接HTML要素に結合する、精製を受けません。
<！DOCTYPE HTML>
<HTML>
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル> </タイトル>
ます。<script type = "text / javascriptの" SRC = "https://cdn.bootcss.com/ angular.js / 1.5.8 / angular.js "> </ SCRIPT>
</ HEAD>
<ボディNG-アプリ="て、myApp」NG-コントローラ= "myCtl">
の<divのNG-バインドのhtml = "コンテンツ">
</ div>
</ body>
</ HTML>
<スクリプト>
VARアプリ= angular.module（ 'て、myApp'、[]）。
app.controller（ 'myCtl'、関数（$スコープは、$ SCE）{
$ scope.temporaryContentは= "私の名前は次のとおりです。<H1スタイル= '色：赤'>ジョン・ドウ</ H1>";
$ scope.content = $ sce.trustAsHtml（$ scope.temporaryContent）。
}）;
</ SCRIPT>
文字列として充填要素（3）結合NG-バインド値。
サービスNGのタイプでは4又は5。
出典：HTTPS：//blog.csdn.net/qq_33587050/article/details/52138069
1、定数サービス：定数は、変更できません内部設定に注入することができます。
（1）app.constant（「名前」、OBJ）
サービスの名前（2）名を、JSONオブジェクトとしてOBJ。
JSONオブジェクトは、サービスを作成することである（3）定戻る（すなわち、オブジェクトに渡された第二のパラメータであります）。
2、価値サービス：値は、内部設定に注入しない、修正することができます。
（1）app.value（「名前」、OBJ）
サービスの名前（2）名を、JSONオブジェクトとしてOBJ。
（3）価値サービスを作成するが、JSONオブジェクトを返す（つまり、オブジェクトに渡された第二のパラメータであります）。
図3に示すように、サービス・サービス
（1）app.service（「名前」、コンストラクタ）は、
（2）ネームサービス名で、2番目のパラメータは、例は、実際にサービスを注入されるコンストラクタです。
図4に示すように、工場出荷時のサービス
（1）app.factory（「名前」、関数（）{}戻りOBJ）
（2）ネームサービス名がobjは実際に、機能は、オブジェクトobjを返し、2番目のパラメータは、通常の関数であります注射のサービス。
5、サービスプロバイダ
（1）App.provider（ "MYCONFIG"、関数（）{$このGET =関数（）{} lastObjを返す。}）;
（2）ネームサービス名で、第二のパラメータであるコンストラクタは、あります$メソッドを取得する必要があり、$ lastObj、lastObjは本当にサービスに注入されているオブジェクトを返すメソッドを取得します。この。$ GETはこれですが、これは中MYCONFIG lastObjあり、MYCONFIGではありません。
6.ドレッシング
（1）App.configファイル（関数（$提供）{$のprovide.decorator（ "名前"、関数（デリゲート$）{}）デリゲート$を返す}）;
（2）同じ設定によって、パラメータジェクト$プロバイダサービス、$プロバイダサービスは、2つの引数、最初の引数「name」を取るデコレータ方法を、持っている機能、サービスの名前、2番目のパラメータで飾らすることは関数であり、注入された$の機能デリゲート、$デリゲートは、関数で装飾サービス、およびオペレーティング$デリゲートの例では、サービスの動作の一例に相当します。
（3）例：
app.configを（関数（$提供）{ // によって設定、$プロバイダサービスパラメータ機能注入
の$ provide.decorator（「名前」、関数 （$デリゲート）{// $プロバイダがかかるサービスデコレータの方法があります二つのパラメータ、
VARのFn = $デリゲート; //デリゲート$に以前保存
$デリゲート=関数（）{//設定外層機能
VAR一覧= Array.from（引数）;
リスト=リスト[1] 。1] 2000;
fn.apply（ヌル、リスト）;
};
$デリゲートを返す; //デリゲート関数の$を返します;
}）
}）;
図7に示すように、実行の順序：実行プロバイダ（定義されたデフォルト）>設定（デフォルトを変更する）>（最後に実行）
（1）設定構成モジュール。プロバイダの実装でサインアップし、構成フェーズ。そして、一定の注入のみのプロバイダ構成ブロック。設定段階では、接尾辞プロバイダを追加するには、プロバイダのニーズに注射すると、あなたは非の$ getメソッドを呼び出すことができます。
（2）実行実行モジュール。送信機を作成するプロセスの後、アプリケーションを起動するために使用されます。のみの場合、一定の注入を実行しています。この方法は、実行時に射出段階を返し、サフィックスプロバイダを追加することなく、この方法しか返されます$を呼び出すことができます。
（1）サービスのCalc定義
app.provider（ 'カルク'、関数（）{this.currency = '＆'を;にconsole.log（1）;}）;
（2）設定サービスCalcの
App.configファイル（関数（calcProvider） {calcProvider.currency = 'お金';にconsole.log（2）;}）;
（3）サービスのCalc実行する。
app.run（関数（計算値）{にconsole.logを（3）;}）;
V.フィルタ
1 （式）フィルタリングの前に{{|フィルタータイプ（引用符なし）：のHTMLの使用フィルタ条件（引用符を）};電子メール属性値が管理者ではありません。TR NGリピート= "ユーザーがユーザー|フィルタ： メールでの{： 'ADMIN！'}「;
JavaScriptで2.使用方法：
（1）JS、$フィルタ（フィルタタイプ）（フィルタリングされたデータ、出力フォーマット）を使用して、$フィルタ（ 'DATE'）（新しい新しい日付（）、 'YYYY-MM-DD HH：MM'）;
（ 2）HTMLでの使用、<スパン= NG-REPEAT "のUserListにユーザ|フィルタ：{チーム：t.id}"> </スパン>
3.フィルタの種類：フィルタ、通貨、番号、日付 、JSON、小文字大文字、limitTo、ORDERBY;
4.filter：処理のための配列は、次いで戻すサブアレイとして部分文字列を含む要素を濾過することができます。文字列の配列であってもよいし、それは、オブジェクトのアレイであってもよいです。オブジェクトが配列である場合は、属性の値を一致させることができます。これは、ルールに一致するサブストリングのためのパラメータを受け取ります。
$ scope.childrenArray = [{名： '君'、年齢：3}、{名： 'シンディ'、年齢：4}、{名前： 'anglar'、年齢：4}、{名前： 'shitou'、年齢。：6}、{名前： 'tiantian'、年齢：5}];
$ scope.func =関数（E）{戻りe.age> 4;}。
{{childrenArray |フィルタ： 'A'}} //一致する属性値が含まれてい
{|：4}フィルタ{childrenArray } // 一致する属性値が含まれている4
{{childrenArray |フィルタ：{名 ： 'i'は
、他の接続されている
1、バブリングangular1
の<divのonclick = "MyFunctionを（イベント、 'イベント'）"> </ div>
<divの-ngのクリック= "MyFunctionを（$イベント、myInput.value）"> </ div>
abc.onclick =関数（イベント）{//ここにイベントがイベントパラメータで、通常の状況下では引数はありません}
2、コントローラの$ Destoryはモニタイベント、ページジャンプが発生し、このイベントが発生します。
：3の間に、角度親、子スコープパス値
子範囲を通過する角度親スコープ値（1）：対象の範囲は、このプロパティは、（これも関数であってもよい）親スコープ属性で定義されています参照によりパス子スコープを渡ります。子スコープでは、受け入れと子スコープを渡すために親スコープの価値を実現するために、プロパティを使用します！
（2）サブスコープ伝統的な値親スコープの角度：範囲は、オブジェクト、親関数で定義された範囲、体内におけるこの関数の関数、親のスコープ属性を割り当てるには、この関数のパラメータです。次に、このように関数を参照交差するサブスコープを渡します。子スコープでは、関数パラメータを渡すと、親スコープに値によってサブスコープを達成するために実行を与えます！これはangular1.0ページング成分における用途を有する：Aは、ページングコンポーネントにリクエストを送信し、背景データを取得する; Bは、上位ページデータが転送され、そのレンダリング機能を確認行います。
図4は、HTMLタグに関連付けられて、NG-アプリテンプレートを経由せずに（）にangular.bootstrapによってHTMLタグに関連する必要はありません！
図5に示すように、角度要素カスタムプロセス：HTMLページ内、および==> templateUrlによって定義またはカスタム導入テンプレート要素によって定義されたテンプレートからJSファイル内のカスタム要素を定義する値を交差カスタムラベルを使用してテンプレート要素は、この文書の範囲を介してプロパティの値に渡され、その後、鋳型にされるであろう。
6、that.template_scope $ = $ rootScope新しい新しい（）;. //新しいサブスコープを作成します。
7は、HTML文字列またはサービスやjqLite DOM対象オブジェクトをコンパイルした後、コンパイラの機能を取得した後、$の範囲を渡す$でコンパイルすることができ、現在のスコープにコンパイルされます、返品はその後することができます、jqLiteオブジェクトをコンパイル（また、再コンパイルする前にドキュメントに追加することができます）ドキュメントに直接追加
付録1：
<a class="btn btn-default" href="#/bookDetail/{{book.id}}"> //实参
場合（ '/ bookDetail /：bookId'、{}）; //形参
VAR bookId = $ routeParams.bookId; //获取实参
2に接続：データバインディング機能に渡された$タイムアウトは$スコープにwindow.setTimeoutはを更新し、修正$スコープ・トリガーの機能に変更される範囲は、更新をトリガしません更新します。出典ます。https：//www.cnblogs.com/xiaxianfei/p/5729444.html
THREE WITH：$ HTTP
。1、$ HTTP（{}）
.success（関数（）{//正常に処理}）
.ERROR（関数（ ）{//エラー処理}）;
2、$ HTTP（{}）
.then（関数（）{//正常に処理}、関数（）{//エラー処理}）;
3、$ HTTP（{}）
。次いで、（関数（）{//正常に処理}）
.catch（関数（）{} //エラー処理）。