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

AngularJS $routeProviderとの違い$stateProviderを教えてください。

ベストプラクティスはどれですか。

どちらも、SPA（シングルページアプリケーション）でルーティングの目的で使用されるのと同じ働きをします。

1. Angular Routing-$ routeProviderドキュメントごと

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

HTML

<div ng-view></div>

上記のタグは、角度の（構成フェーズ）で$routeProvider.when()述べた状態からテンプレートをレンダリングします.config

制限：-

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

2. ui- router-$ 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機能は、ネストされた状態とビューを管理できることです。

長所

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

詳細情報Angular ui-router

状態を含むさまざまなネストされたビューの柔軟性を向上させるために、 ui-router

Angular独自のng-RouterはURLsルーティング時に考慮に入れ、UI-RouterはstatesURLに加えて考慮します。

状態は名前付きのネストされた並列ビューにバインドされているため、アプリケーションのインターフェースを強力に管理できます。

ng-routerでは、<a href="">タグを介してリンクを提供する場合、URLに非常に注意する必要がありますが、UI-Routerでは注意する必要がありますstate。のようなリンクを提供します<a ui-sref="">。<a href="">ng-routerで行うのと同じように、UI-Routerで使用した場合でも機能します。

したがって、いつかURLを変更することを決定した場合でも、URL stateは同じままであり、URLを変更する必要があるのはのみ.configです。

ngRouterを使用して単純なアプリを作成できますが、UI-Routerを使用すると、複雑なアプリの開発がはるかに簡単になります。ここにそのウィキ。

$ route：これは、URLをコントローラーおよびビュー（HTMLパーシャル）にディープリンクするために使用され、$ 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'
        });