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

1091

Premchandra Singh 2014-01-10 05:03.

大きなアプリケーションでAngularJSを使用することを計画しています。ですから、私は使用する適切なモジュールを見つける過程にあります。

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

ngRouteが使用される多くの記事では、ルートは$ routeProviderで構成されます。ただし、ui-routerと一緒に使用する場合、ルートは$ stateProviderと$ urlRouterProviderで構成されます。

管理性と拡張性を向上させるには、どのモジュールを使用する必要がありますか？

javascript angularjs angularjs-routing angular-ui-router angularjs-module

15 answers

1117

TheSharpieOne 2014-01-10 05:24.

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

ngRouteではなくui-routerが選択される一般的な理由は次のとおりです。

ui-routerは、ネストされたビューと複数の名前付きビューを許可します。これは、他のセクションから継承するページがある可能性がある大きなアプリで非常に役立ちます。
ui-routerを使用すると、状態名に基づいて状態間のストロングタイプのリンクを設定できます。を使用してリンクを作成すると、URLを1か所で変更すると、すべてのリンクがその状態に更新されますui-sref。URLが変更される可能性のある大規模なプロジェクトに非常に役立ちます。
アクセスしようとしているURLに基づいてルートを動的に作成できるようにするために使用できるデコレータの概念もあります。これは、事前にすべてのルートを指定する必要がないことを意味する場合があります。
州では、さまざまな州に関するさまざまな情報をマッピングしてアクセスでき、を介して州間で情報を簡単に渡すことができます$stateParams。
テンプレート内のUI要素を調整する（現在の状態のナビゲーションを強調表示する）ために、状態または状態の親にあるかどうかを簡単に判断できます。$stateこれは、$rootScopeに設定することで公開できるui-routerによって提供され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/#/

136

gab 2014-01-10 05:30.

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

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

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

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

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

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

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

Asik 2014-12-19 03:05.

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/

Jake Johnson 2014-01-10 05:28.

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

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

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

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

artch 2014-04-08 09:24.

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

UniCoder 2016-01-03 12:36.

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

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

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

ngRouteにいる間、ビューとコントローラーをアタッチするだけです。

Mahesh K 2016-08-31 02:12.

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

Sean 2015-06-27 17:58.

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

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

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

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

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

ngRouteとui-routerの優れた比較は、このポッドキャストのエピソードにあります。

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

Kunal Kapadia 2014-08-29 00:06.

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

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

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

digish a d 2016-10-30 14:18.

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

すべての機能をお休みください。

Alireza 2015-10-17 03:34.

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

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

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

また、使用するときは、ngView ..を使用することを忘れないでください。

ng-ui-routerは異なりますが、次のようになります。

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

vaheeds 2016-02-08 19:16.

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

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

Rajat-Systematix 2017-03-08 23:51.

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

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

Noname 2017-01-19 23:32.

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

Ragupathy 2017-08-17 02:12.

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

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