[解決済み] ルートプロバイダとステートプロバイダの違いは何ですか?
2022-04-22 02:02:11
質問
との違いについて教えてください。
$routeProvider
と
$stateProvider
をAngularJSで使用します。
ベストプラクティスはどれですか?
どのように解決するのか?
どちらもSPA(Single Page Application)でルーティングのために使用されるため、同じ作業を行います。
1. Angularルーティング - per ルートプロバイダのドキュメント
<ブロッククオートコントローラやビューへのURL(HTMLパーシャル)。これは $location.url()で、そのパスを既存のルートにマッピングしようとします。 の定義に従います。
HTML
<div ng-view></div>
上のタグは、テンプレートにある
$routeProvider.when()
で指定した条件
.config
(コンフィギュレーションフェーズ)の角度の
制限事項:-)
-
このページには、単一の
ng-view
ページで -
SPAがページ上に複数の小さなコンポーネントを持ち、何らかの条件に基づいてレンダリングしたい場合。
$routeProvider
は失敗します。(それを実現するためには、以下のようなディレクティブを使用する必要があります。ng-include
,ng-switch
,ng-if
,ng-show
SPAにあるのはまずいと思うので) - 2つのルート間を親子関係のように関連付けることはできません。
- urlパターンに基づいて、ビューの一部を表示したり非表示にしたりすることはできません。
2. ui-router - あたり stateProviderのドキュメント
AngularUI Routerは、AngularJSのルーティングフレームワークで、以下のようなことが可能です。 は、インターフェイスのパーツをステートマシンに編成することができます。 UI-Routerはステートを中心に構成され、そのステートにはオプションで ルート、およびその他の動作が付属しています。
複数のビューと名前付きビュー
もう一つの大きな特徴は、1つのテンプレートに複数のui-viewを設定できることです。
複数のビューを並列に表示することは強力な機能ですが、多くの場合は
view
を作成し、それらのビューをネストされたステートとペアリングします。
HTML
<div ui-view>
<div ui-view='header'></div>
<div ui-view='content'></div>
<div ui-view='footer'></div>
</div>
の大半は
ui-router
の威力は、ネストされたステート&ビューを管理できることです。
長所
-
を複数持つことができます。
ui-view
を1つのページ - ルーティングフェーズで状態を定義することにより、様々なビューを相互にネストさせ、維持することができる。
- また、兄弟姉妹の状態を定義することも可能です。
-
を変更することができます。
ui-view="some"
を使用した絶対ルーティングを使用するだけで、状態の@
を状態名とする。 -
相対ルーティングを行う別の方法として
@
を変更するためにui-view="some"
. これはui-view
がネストされているかどうかをチェックするのではなく、ネストされていることを確認します。 -
ここでは
ui-sref
を作成しhref
をベースに動的にURLを作成します。URL
に記載されている状態パラメータを指定することもできます。json
の形式を使用します。
状態を持つさまざまなネストしたビューをより柔軟に扱うには、私は
ui-router
関連
-
Vueはランニングライト形式のテキストを水平方向にスクロールする機能を実装している
-
JavaScriptのクロージャの説明
-
[解決済み】ExpressJS - throw er Unhandled errorイベント
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] callとapplyの違いは何ですか?
-
[解決済み] Bowerとnpmの違いは何ですか?
-
[解決済み] JavaScriptのnullとundefinedの違いは何ですか?
-
[解決済み] angular-routeとangular-ui-routerの違いは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueの要素ツリーコントロールに破線を追加する説明
-
Vue+ElementUIによる大規模なフォームの処理例
-
vueディレクティブv-bindの使用と注意点
-
[解決済み】「X-Frame-Options」を「SAMEORIGIN」に設定したため、フレームでの表示を拒否された。
-
[解決済み】TypeErrorの解決方法。未定義またはヌルをオブジェクトに変換できない
-
[解決済み】React-Redux: アクションはプレーンオブジェクトでなければならない。非同期アクションにはカスタムミドルウェアを使用する
-
[解決済み】「.addEventListener is not a function」なぜこのエラーが発生するのか?
-
nodejs unhandledPromiseRejectionWarning メッセージ
-
フロントエンド非同期(アシンク)ソリューション(全ソリューション)
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。