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で構成されます。

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

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であり、シートの下ではまったく異なります。これらの追加機能は、大規模なアプリケーションに非常に役立ちます。

詳しくは:

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を選択することをお勧めします。

73
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/

52
Jake Johnson 2014-01-10 05:28.

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

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

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

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

35
artch 2014-04-08 09:24.

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

19
UniCoder 2016-01-03 12:36.

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

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

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

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

18
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-routerui-router

13
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モジュールが置き換えられます。ここでは 新しいルータモジュールの現在のドキュメントである-実装はまだ確定されていないので、それはこの投稿のようにかなりまばらです。見るここで、このモジュールは、実際にリリースされるときのより多くのニュースのために。

11
Kunal Kapadia 2014-08-29 00:06.

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

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

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

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

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

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

8
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が、より多くのオプションを提供します。

6
vaheeds 2016-02-08 19:16.

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

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

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

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

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

3
Noname 2017-01-19 23:32.

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

0
Ragupathy 2017-08-17 02:12.

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

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

Related questions

MORE COOL STUFF

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

Netflixのジョエルマクヘイルとのジョエルマクヘイルショーは、ジョエルマクヘイルにぴったりの車を復活させます

Netflixのジョエルマクヘイルとのジョエルマクヘイルショーは、ジョエルマクヘイルにぴったりの車を復活させます

ジョエル・マクヘイル、マイク・コルター(スクリーンショット:Netflix)「私の神よ、これは1つのことを変えます。」これは、ジョエル・マクヘイルとのジョエル・マクヘイルショーの最後のジョークです。リアリティ番組の嘲笑と寛大なスナキネスの時間は、なじみのある顔を見つけます。

チームロケットは20年ぶりにポケモンシリーズでアッシュを破った

チームロケットは20年ぶりにポケモンシリーズでアッシュを破った

画像経由:@pancakeparadox(Twitter)。1997年にポケモンシリーズが初公開されて以来、チームロケット(またはラテンアメリカではチームロケット)として知られる悪役のグループは、何度もアッシュに直面してきました。

今週の科学技術でトランプがめちゃくちゃになったことすべて

今週の科学技術でトランプがめちゃくちゃになったことすべて

画像:ゲッティ私たち全員が千年もの間生きていて、私たちの体が燃える風によってほこりと長引く悲鳴だけに押し流されたと考えるのは驚くべきことです。私たちがそうしていないことを除いて、それはトランプ政権の最初の週の終わりであり、驚くほど多くの恐ろしいことがすでに起こっています。

あなたの「マイクロピッグ」が代わりに通常のピッグになってしまったとしても驚かないでください

あなたの「マイクロピッグ」が代わりに通常のピッグになってしまったとしても驚かないでください

そして今、あることを手に入れていると思っていたが、まったく別のことをしてしまった男の話。CBSニュースは、彼女が「ミニブタ」であるという誤ったふりをしてエスターを養子にしたカナダ人のスティーブジェンキンスの心温まる物語をもたらします。これは、特にせいぜいゴールデンレトリバーまたはセントバーナードをストラップします。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language