1. ホーム
  2. javascript

[解決済み] ルートプロバイダとステートプロバイダの違いは何ですか?

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 の形式を使用します。

詳細はこちら Angular ui-router

状態を持つさまざまなネストしたビューをより柔軟に扱うには、私は ui-router