附属書：包装方法：その後、ダブルを使用。プロセスの内部、（1）、（2）$のHTTPリクエストは、機能注入（deferred.resolve内で実行される（結果））、キャッチ機能、（3）とは、最終的にdeferred.promise返す最終的に機能を実行する繰延取得します;第二に、メソッドの呼び出しは、deferred.resolveのコールバック.then成功または失敗（結果）を注入することにより、完了したときに呼び出します！
JavaScriptの``
関数外部（OBJ）{
VARのDeferred q.defer = $（）;
$ HTTP（OBJ）.then（関数（結果）{// 2、$ HTTP（OBJ）非同期、この注入ライン次いで5、サーバがデータを返す場合、このライン実行
deferred.resolve（結果）; // 6、パラメータパッシング及び注入ステップ4（再利用を考慮することなく、ステップ4はまた、ここに行くことができる）
}）;
のDeferredを返します.promise; // 3、リターン約束インスタンス
}
外部（）を（関数（結果）{}）; ... // 1、外部（）4を行い、移植次いで
`` `
、ui.routerの
ui.routerとngRoute差
（1）ui.routerモジュールは$ urlRouterProvider、$ stateProvider、$ stateParamsサービスを提供する
（2）ngRouteモジュールは$ routeProvider、$ routeParamsサービスを提供
ソースhttps://blog.csdn.net/mcpang/article/details/55101566
ルーティングモジュールui.router 1、
$ stateProvider.state（stateNameString、stateConfigObject）でルーティングを設定するには、（1）$ stateProviderオブジェクトを提供します。<UIビュー>交換するには</ UI -view> や<divのUIビュー> </ div>のテンプレートと。：stateConfigObjectには、次のものがあり
、 `` `のHTML
テンプレート：文字列/機能、HTMLテンプレート文字列、または文字列が返されたHTMLテンプレート機能。
templateUrl：文字列/機能、パス文字列テンプレート、テンプレートまたはパス文字列関数を返します。
templateProvider：機能、サービスHTMLテンプレート文字列またはテンプレートパスに戻ります。
コントローラ：文字列/機能、新しい登録名の文字列コントローラ機能または登録コントローラ。
controllerProvider：この関数は、コントローラまたはコントローラサービスの名前を返し
controllerAsを：文字列、コントローラの別名。
親：文字列/オブジェクトは、手動で親状態を指定します。
解決：オブジェクトは、コントローラ機能、<文字列、機能>フォームを実行するために注入されます。
URL：文字列、URLの現在の状態に対応します。
ビュー：オブジェクトは、ディスプレイの設定を表示します。<文字列、オブジェクト>フォーム。
抽象的：決して抽象状態がアクティブになるブール、それはその子を提供するために、特性を継承することができます。デフォルトはtrueです。
フォーカス取得時：機能、コールバック関数の状態に入ります。
フォーカス喪失時：機能、コールバック関数は、後の状態を終了します。
reloadOnSearch：ブール、falseの場合は、検索/クエリパラメータの変更は、あなたが$ location.searchを変更するときのために、同じ状態をトリガしません（）ページをリロードする必要はありません。デフォルトはtrueです。
データ：オブジェクト、任意のオブジェクトデータ、カスタム設定。データプロパティは、親状態を継承しています。換言すれば、データは、全体継承ツリー構造を得ることができるプロトタイプデータを追加することによって達成することができます。
params：パラメータ値内のURL、ページ間のパラメータの受け渡しは、それによって達成することができます。
`` `
（2）バックグラウンド経路と一致しない$ urlRouterProvider.otherwise構成の背景$ urlRouterProvider.when構成マッチング経路に$ urlRouterProviderオブジェクトを、提供する
実際の実装ui.router、ステップ2：URLパラメータが配置されるべき属性初期化パラメータでのparamsに設定する必要があります。
JavaScriptの`` `
クリック- = NG "GO_TOを（ '安全'、 'NOREAD'）" //トリガー
の$ scope.go_to =機能（ページ、のparams ）{$ state.go（ページ、{対象：のparams}）}; //定義
$ scope.go_to =関数（ページ、paramsは ）{$ state.go（ '安全'、{対象： 'NOREAD'}）}; //が実行
$ stateProvider.state（ '安全な'を、{ paramsは：{ターゲット：NULL }、templateUrlは:,}）//を定義
$をstateProvider.state（ '安全'、{ {対象：paramsは} :,、templateUrl 'をNOREAD'}）// 実行
`` `
（1）経路の状態を定義し、
` ` JavaScriptの`
$ stateProvider
.STATE（ 'PAGE2'、{
URL： '/イベントセーフ/：タイプ'、//（1）パラメータの定義
：{//この効果が配置されている：初期化パラメータparamsは
タイプ：ヌル
}
templateUrl： 'イベント/イベントsafe.html'、
コントローラ'eventSafeCtrl'
}）
`` `
（2）HTMLページ、活性化ルーティングにおけるトリガイベント
` ``のJavaScript
Aは、$ state.go（）：優先度よりも非常に便利な方法、例えば<ボタンのonclick = "changeState（） "> </ボタン>
B、UI-SREF：このジャンプ命令を含むクリックし、例えば、UI-SREF = "PAGE2（{タイプ：1}）"> </a>を<
C、URL：URLナビゲーション、例えば<NG-HREF = " ＃/ PAGE2 / 1 "> </a>の
` `
HTMLページにおけるターゲットコントローラで（3）、及び取得パラメータ関数の定義
`のJavaScript
$ scope.changeState =関数（）{
$ state.go（" PAGE2」、{タイプ：1} ）; //（2） 割り当てられたパラメータの
}
$ stateParams.type //（3）取得パラメータ。
`` `
（4）$のURL stateProvider責任関連状態。$ state.go（状態）実行のURLがある場合、urlは、ブラウザのアドレスバーとトリガーの$ urlRouterProviderに割り当てられます。それ以外の場合はそうではないだろう。
ブラウザのアドレスバーにURLを監視する責任$ urlRouterProvider。urlは、それに関連付けられた状態がない場合、ウルラ状態が対応する状態に割り当てられている、ウルラでURLの$ urlRouterProvider.otherwise（ウルラ）に割り当てられる、変更しました。
3、ネスティングをルーティングui.router：構文レベルの設定をルーティングすることにより、
ケース：
ケース出典ます。https：//blog.csdn.net/u011068996/article/details/54861844
ケース出典ます。https：//www.cnblogs.com /haogj/p/4885928.html
インデックス：コードサンプルを。
`` `HTML：実行
<！DOCTYPE HTML>
<HTML LANG = "EN" NG-アプリ= "日曜日">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>のindex.html </ TITLE>
< / HEAD>
<BODY>
<a ui-sref="hello" ui-sref-active="active">ハロー</a>の
<a ui-sref="world" ui-sref-active="active">世界</a>の
<UIビュー> </ UIビュー>
<スクリプトSRC = "JS / angular.js"> </スクリプト>
<スクリプトSRC = "JS /角度-UI-router.js"> </スクリプト>
<スクリプトSRC = "JS / index.js"> </ SCRIPT>
</ BODY>
</ HTML>
`` `
代码示例二：世界。HTML
`` `HTML：実行
の<div>
<a ui-sref=".isRely" ui-sref-active="active"> isRely </a>の
<UI-SREF = "NORELY" UI-SREFアクティブ= "アクティブ"> NORELY </a>の
</ div>
<DIV UIビュー> </ div>
`
代码示例三：index.js
`ジャバスクリプト
angular.module（ '日曜日'、[ 'ui.router']）
の.config（関数（$ stateProvider）{
$ stateProvider.state（ 'こんにちは世界'、{
URL： '/こんにちは'、
テンプレート： '！<H3>のHello World </ H3>'
}）の状態（ '世界'、{。
URL： '/世界、
templateUrl ： 'world.html'
}）の状態（ 'world.isRely'、{。
URL： '/ isRely /世界、
テンプレート： '<H3>これは世界1 </ H3>である'
。}）の状態（」NORELY」、{
URL： '/世界/ NORELY'、
テンプレート： '<H3> NORELYが世界に依存しない、我々は彼が<divのUIビュー>を置き換えます、それをクリックindex.htmlをで、</ div> </ H3>'
}）
}）;
` ``
添付：ngRouteモジュールは$ routeProviderサービスを提供して
`` `JavaScriptの
<a class="btn btn-default" href="#/bookDetail/{{book.id}}"> //引数
のapp.config（関数（ $ routeProvider）{$ routeProvider.when（ '/ bookDetail /：bookId'、{}）（）}）; // パラメータ
VAR bookId = $ routeParams.bookId; //引数を取得し
`
。II $ Q
1は、ソース$ Qの
$ Qは層角プロミスにカプセル化され、そして3つの方法のインスタンスが並列に$ q.deferを（）約束戻ります。
$のq.defer（）==>（据え置き ）==> インスタンスと約束三つの方法。
q.js 302角度ソース線に：関数延期（）{新しい戻り繰延（）;}
角度ソースコードでQ。
VaRの約束= this.promise =新しい約束（ ）;
非プロトタイピング//（実行するために必要な未結合のサポート）
プロトタイプメソッドの実行のサポート、未結合の非必要な//
=機能（ヴァル）{resolvePromise（約束this.resolve、ヴァル）;};
this.reject =関数（理由）{rejectPromise（プロミス、理由）;};
this.notify =関数（進捗状況）{notifyPromise（プロミス、プログレス）;};
}
`
2、$ Qケース
`` `JavaScriptの
<SCRIPT>
VARのApp = angular.module（ 'AppModule'、[]）;
app.controller（ 'Ctrlキー'、機能（$スコープ）{
ましょうtestFn =（）=> {
のletの$ Q = DEFFERED .defer（）;
のsetTimeout（（）=> {
deffered.resolve（ "データ"）;
//噴射パラメータ渡し、今後のコールバックを行います
}、1000）。
deffered.promise返します。
}
testFn（）を（（データ）=> {
にconsole.log（データ）;
（testFnを返します）;
}
}）。
</スクリプト>
`` `
3、$ Q案例二
` `` HTMLの
<！DOCTYPE HTML>
<HTML LANG = "EN" NG-アプリ= "appModule">
<ヘッド>
の<meta charset = "UTF-8"を>
<タイトル>ドキュメント</タイトル>
ます。<script type = "text / javascriptの" SRC = "https://cdn.bootcss.com/angular.js/1.5.8/angular.js"> </ SCRIPT>
</ヘッド>
<ボディNG-コントローラ= "CTRL">
<ボタンクラス= "BTN BTN-成功" NGクリック=」
<スクリプト>
VARアプリ= angular.module（ 'appModule'、[]）。
app.controller（ 'CTRL'、関数（$スコープ）{
ましょうtestFn =（）=> {
letのdeffered = $ q.defer（）;
のsetTimeout（（）=> {
deffered.resolve（ "データ"）;
//向注入进来的回调传参并执行
}、1000）;
deffered.promise返す;
}
$ scope.test =（）=> {
testFn（）
.then（（データ）=> {
にconsole.log（データ）
のリターンtestFn（）;
}）
.then（（データ）=> {
にconsole.log（データ）;
（testFnを返します）。
.then（（データ）=> {
にconsole.log（データ）;
testFn（）を返す;
}）
.catch（ERR => {
にconsole.log（ERR）;
}）
}
}）。
</ SCRIPT>
`
4、$ Q案例三
`ジャバスクリプト
$ HTTP（）
.then（関数（RES）{deferred.resolve（res.data）}）
.catch（関数（ERR）{deferred.reject （ERR）;}）
.finally（関数（）{}）;
或者
$ HTTP（）
.then（関数（RES）{deferred.resolve（res.data）}、
関数（ERR）{deferred.reject（ERR） ;}）
.finally（関数（）{}）
`` `
27angularルーティングui.routerと$ qを
おすすめ
転載: www.cnblogs.com/gushixianqiancheng/p/10966340.html
おすすめ
ランキング