angular-routeとangular-ui-routerの違いは何ですか？

大きなアプリケーションでAngularJSを使用する予定です。そのため、使用する適切なモジュールを見つける準備をしています。

ngRoute（angular -route.js）モジュールとui-router（angular-ui-router.js）モジュールの違いは何ですか？

多くの記事でngRouteが使用されている場合、ルートは$ routeProviderで構成されます。ただし、ui-routerで使用する場合、ルートは$ stateProviderおよび$ urlRouterProviderで構成されます。

管理性と拡張性を向上させるには、どのモジュールを使用すればよいですか？

ui-routerはサードパーティのモジュールであり、非常に強力です。これは、通常のngRouteが実行できるすべての機能と、多くの追加機能をサポートしています。

次に、ngRouteよりもui-routerが選択される一般的な理由をいくつか示します。

• ui-routerでは、ネストされたビューと複数の名前付きビューを使用できます。これは、他のセクションから継承するページがある大きなアプリで非常に役立ちます。

• ui-routerを使用すると、状態名に基づいて状態間の強い型のリンクを設定できます。1か所でURLを変更すると、を使用してリンクを作成するときに、すべてのリンクがその状態に更新されますui-sref。URLが変更される可能性のある大規模なプロジェクトに非常に役立ちます。

• アクセスしようとしているURLに基​​づいてルートを動的に作成するために使用できるデコレーターの概念もあります。これは、事前にすべてのルートを指定する必要がないことを意味します。

• 状態を使用すると、さまざまな状態に関するさまざまな情報をマップしてアクセスでき、を介して状態間で情報を簡単に渡すことができます$stateParams。

• 経由して、あなたのテンプレート内のUI要素（現在の状態のナビゲーションを強調）を調整する状態の状態または親である場合は、容易に判断することができ$state、あなたがそれを設定経由で公開することができ、UI-ルータによって提供さ$rootScopeにrun。

本質的に、ui-routerはより多くの機能を備えたngRouterであり、シートの下ではまったく異なります。これらの追加機能は、より大きなアプリケーションに非常に役立ちます。

詳しくは：

• Github：https : //github.com/angular-ui/ui-router
• ドキュメンテーション：
  • APIリファレンス：http : //angular-ui.github.io/ui-router/site/#/api
  • ガイド：https : //github.com/angular-ui/ui-router/wiki
• よくある質問：https : //github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
• サンプルアプリケーション：http : //angular-ui.github.io/ui-router/sample/#/

ngRouteは、以前AngularJSコアの一部であったAngularJSチームによって開発されたモジュールです。

ui-routerは、ルーティング機能を改善および強化するためにAngularJSプロジェクトの外部で作成されたフレームワークです。

ui-routerのドキュメントから：

AngularUIルーターは、AngularJSのルーティングフレームワークであり、インターフェイスの一部をステートマシンに編成できます。URLルートを中心に構成されているAngularコアの$ routeサービスとは異なり、UI-Routerは状態を中心に構成されており、オプションでルートやその他の動作をアタッチできます。

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

どちらも優れているわけではありません。プロジェクトに最も適したものを選択する必要があります。

ただし、アプリケーションで複雑なビューを使用する予定があり、 "$ state"の概念を処理する必要がある場合。ui-routerを選択することをお勧めします。

ngRouteは、基本的なシナリオに適した角度コアモジュールです。今後のリリースで、より強力な機能が追加されると思います。

URL：https : //docs.angularjs.org/api/ngRoute

Ui-routerは、ngRouteの問題を克服するために提供されたモジュールです。主にネスト/複雑なビュー。

URL：https : //github.com/angular-ui/ui-router

ui-routerとngRouteの違いの一部

http://www.amasik.com/angularjs-ngroute-vs-ui-router/

ngRouteはコアAngularJSフレームワークの一部です。

ui-routerは、デフォルトのルーティング機能を改善するために作成されたコミュニティライブラリです。

以下は、ui-routerの構成/設定に関する優れた記事です。

http://www.ng-newsletter.com/posts/angular-ui-router.html

ngRouteパラダイム内に実装されたネストされたビュー機能を利用したい場合は、angular-route-segmentを試してください-ngRouteを置き換えるのではなく拡張することを目的としています。

一般的にui-routerは状態メカニズムで動作します...簡単な例で理解できます：

音楽ライブラリ（..gaanaやsaavanなど）の大きなアプリケーションがあるとします。そして、ページの下部に、ページのすべての状態で共有される音楽プレーヤーがあります。

ここで、いくつかの曲をクリックして再生するとします。この場合、ページ全体を再読み込みするのではなく、その音楽プレーヤーの状態のみを変更する必要があります。これはui-routerで簡単に処理できます。

ngRouteの間は、ビューとコントローラーを接続するだけです。

Angular 1.x

ng-route：

ng-routeは、ルーティングのためにangularJSチームによって開発されました。

ng-route： url（場所）ベースのルーティング。

例：

$routeProvider
    .when("/home", {
        templateUrl : "home.html"
    })

ui-route：

ui-routerはサードパーティのモジュールによって開発されています。

ui-router：状態ベースのルーティング

例：

 $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home.html'
        })

-> ui-routerはネストされたビューを許可します

-> ng-routeよりも強力なui-router

ng-router、 ui-router

ngRouteは、基本的なクライアント側ルーティング機能を提供するAngularチームによって構築されたモジュールです。このモジュールは、ルーティングのためのかなり強力な基盤を提供し、このブログ投稿に例示されているように、非常に簡単に構築して確実なルーティング機能を提供できます（Ward Bellと著者のBen Nadelの間のコメント証跡を必ず読んでください-それらはAngularプロのカップル）

ui-routerは、フォーカスをURL中心のルートからアプリケーションの「状態」に移行します。これは、URLに反映される場合と反映されない場合があります。

ui-routerによって追加される主な機能は、ネストされた状態と名前付きビューです。

ネストされた状態により、アプリケーションのさまざまな部分のコントローラーロジックを分離できます。この非常に単純な例は、上部にプライマリナビゲーション、左側にセカンダリナビゲーションリスト、右側にコンテンツがあるアプリです。ネストされた状態がない場合、単一のコントローラは通常、コンテンツだけでなく、セカンダリナビゲーションの表示ロジックも処理する必要があります。ネストされたルーティングを使用すると、これらの問題を分離できます。

名前付きビューは、ui-routerのもう1つの追加機能です。ngRouteを使用すると、ページに単一のngViewディレクティブのみを設定できますが、ui-routerの名前付きビューを使用すると、複数のui-viewディレクティブを指定でき、各状態は名前ビューのテンプレートとコントローラーに影響を与えることができます。これの非常に単純な例は、アプリのメインコンテンツをプライマリビューにしてから、別個のuiビューとなるフッターバーを持つことです。このシナリオでは、フッターのコントローラーは状態/ルートの変更をリッスンする必要がなくなりました。

ngRouteとui-routerの良い比較は、このポッドキャストエピソードで見つけることができます。

混乱を避けるために、AngularチームがAngularのバージョン1.5および2.0向けにリリースする予定の新しい「公式」ルーティングモジュールに注意してください。これはngRouteモジュールを置き換えることになります。ここでは 新しいルータモジュールの現在のドキュメントである-実装はまだ確定されていないので、それはこの投稿のようにかなりまばらです。見るここで、このモジュールは、実際にリリースされるときのより多くのニュースのために。

ngRouteは基本的なルーティングライブラリで、任意のルートに対して1つのビューとコントローラーのみを指定できます。

ui-routerを使用すると、並列ビューとネストビューの両方で複数のビューを指定できます。したがって、アプリケーションであらゆる種類の複雑なルーティング/ビューが必要な場合（または将来必要になる可能性がある場合）は、ui-routerを使用してください。

これは、AngularUIルーターの入門ガイドとして最適です。

知っておくべき基本的なこと：ng-routerの使用$location.path()とui-routerの使用$state.go

すべての機能を休ませてください。

uiルーターはあなたの人生を楽にします！アプリケーションに挿入することで、AngularJSアプリケーションに追加できます...

ng-route コアAngularJSの一部として提供されるため、よりシンプルで、オプションが少なくなります...

ng-routeをよりよく理解するには、こちらをご覧ください：https : //docs.angularjs.org/api/ngRoute

また、使用する場合は、忘れずにngViewを使用してください。

ng-ui-routerは異なりますが：

https://github.com/angular-ui/ui-routerしかし、より多くのオプションを提供します...

AngularUIルーターは、AngularJSのルーティングフレームワークであり、インターフェイスの一部をステートマシンに編成できます。URLルートを中心に編成されているAngular ngRouteモジュールの$ routeサービスとは異なり、UI-Routerは状態を中心に編成されており、オプションでルートやその他の動作をアタッチできます。

https://github.com/angular-ui/ui-router

ngRouteは、Angular.jsチームによって開発されたモジュールで、以前はAngularコアの一部でした。

ui-routerは、ルーティング機能を改善および強化するためにAngular.jsプロジェクトの外部で作成されたフレームワークです。

1- ngRouteは角度のあるチームによって開発されていますが、ui-routerはサードパーティのモジュールです。2- ngRouteはルートURLに基​​づいてルーティングを実装しますが、ui-routerはアプリケーションの状態に基づいてルーティングを実装します。3- ui-routerは、ng-routeが提供するすべてに加えて、ネストされた状態や複数の名前付きビューなどのいくつかの追加機能を提供します。

ng-View（AngularJSチームが開発）はページごとに1回だけ使用できますが、ui-View（サードパーティモジュール）はページごとに複数回使用できます。

ui-View したがって、最良のオプションです。