web-dev-qa-db-ja.com

$ routeProviderと$ stateProviderの違いは何ですか？

AngularJSの$routeProviderと$stateProviderの違いを説明してください。

どちらがベストプラクティスですか？

javascriptangularjsangular-ui-routerangularjs-routing
168
YYY

どちらもSPA（Single Page Application）でルーティング目的に使用されるのと同じ働きをします。

1. Angular Routing - per $ routeProvider docs

コントローラとビューへのURL（HTMLパーシャル）。それは$ location.url（）を監視してパスを既存のルート定義にマッピングしようとします。

HTML

<div ng-view></div>

上記のタグは、angleの.config（configuration phase）で述べた$routeProvider.when()条件からテンプレートをレンダリングします。

制限事項： -

  • ページには、ページ上に単一のng-viewのみを含めることができます
  • いくつかの条件に基づいてレンダリングしたいページ上に複数の小さなコンポーネントがSPAにある場合、$routeProviderは失敗します。 （そのためには、ng-include、ng-switch、ng-if、ng-showのようなディレクティブを使用する必要があります。これらはSPAで使用するには不適切に見えます）
  • あなたは親子関係のように2つの経路の間で関係することはできません。
  • URLパターンに基づいてビューの一部を表示および非表示にすることはできません。

2. ui-router - per $ stateProviderのドキュメント

AngularUIルーターはAngularJSのルーティングフレームワークで、インターフェイスの一部をステートマシンにまとめることができます。 UI-Routerは状態を中心に編成されています。状態にはオプションでルートやその他の動作を付加することができます。

複数の名前付きビュー

もう1つの優れた機能は、テンプレート内に複数のUIビューを持つことができることです。

複数の並列ビューは強力な機能ですが、多くの場合、viewをネストし、それらのビューをネストした状態とペアにすることで、インターフェイスをより効率的に管理できます。

HTML

<div ui-view>
    <div ui-view='header'></div>
    <div ui-view='content'></div>
    <div ui-view='footer'></div>
</div>

ui-routerの力の大部分は、入れ子になった状態とビューを管理できることです。

長所

  • 1ページに複数のui-viewを含めることができます
  • さまざまなビューを互いに入れ子にして、ルーティングフェーズで状態を定義することで維持できます。
  • ここでは子と親の関係を持つことができます。単に状態の継承のように、兄弟状態を定義することもできます。
  • ui-view="some"を状態名と共に使用して絶対ルーティングを使用するだけで、@ of stateを変更できます。
  • 相対ルーティングを行うことができるもう1つの方法は、@を変更するためにui-view="some"のみを使用することです。ネストされているかどうかをチェックするのではなく、これはui-viewを置き換えます。
  • ここではui-srefを使用して、州で言及されているhrefに基づいてURLのURLを動的に作成できます。また、jsonの形式で州のパラメーターを指定することもできます。

詳細情報Angular ui-router

状態付きのさまざまなネストされたビューでの柔軟性を高めるために、ui-routerを選択してください。

242
Pankaj Parkar

Angularの独自のng-Routerはルーティング中にURLsを考慮します、UI-RouterはURLに加えてstatesを受け取ります。

ステートは名前付き、ネスト、およびパラレルビューにバインドされているため、アプリケーションのインターフェイスを強力に管理できます。

Ng-routerでは、<a href="">タグを介してリンクを提供するときはURLについて非常に注意する必要がありますが、UI-Routerではstateのみを覚えておく必要があります。あなたは<a ui-sref="">のようなリンクを提供します。たとえあなたがUI-Routerで<a href="">を使ったとしても、あなたがng-routerでするのと同じように、それはまだうまくいくでしょう。

したがって、いつかURLを変更することにしたとしても、stateは変わりませんので、URLを変更する必要があるのは.configだけです。

NgRouterを使って簡単なアプリを作ることができますが、UI-Routerは複雑なアプリのために開発をずっと容易にします。こちらが wikiです。

73
Aniket Sinha

$ route：これはURLをコントローラやビュー（HTMLパーシャル）にディープリンクするために使われ、既存のrouteの定義からパスをマッピングするために$ location.url（）を監視します。

NgRouteを使用すると、ルートは$ routeProviderで設定され、ui-routerを使用すると、ルートは$ stateProviderと$ urlRouterProviderで設定されます。

<div ng-view></div>
    $routeProvider
        .when('/contact/', {
            templateUrl: 'app/views/core/contact/contact.html',
            controller: 'ContactCtrl'
        });


<div ui-view>
    <div ui-view='abc'></div>
    <div ui-view='abc'></div>
   </div>
    $stateProvider
        .state("contact", {
            url: "/contact/",
            templateUrl: '/app/Aisel/Contact/views/contact.html',
            controller: 'ContactCtrl'
        });
0
mukesh mali