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

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

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

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

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

HMSプリンスオブウェールズの橋はスターウォーズからまっすぐです

HMSプリンスオブウェールズの橋はスターウォーズからまっすぐです

BAE Systems Maritimeは昨日、英国海軍の2番目のクイーンエリザベスクラスの空母であるHMSプリンスオブウェールズのブリッジモジュールを展開しました。公海を航海するよりも、アウターリムの惑星を周回してタイファイターを発射する必要があるようです。70,000の排水量のトン運搬船は、2020年に就役し、姉のエリザベス女王と同様に、約40機の航空機を運ぶ予定です。

ルイビルはサヨナラゲームでウェイクフォレストを倒すために家を盗んだ

ルイビルはサヨナラゲームでウェイクフォレストを倒すために家を盗んだ

ルイビルは、通常の大学野球の強みであるピッチング、ディフェンス、スマートベースランニングを通じて、全国ランキングのトップ5と19-2の会議記録への道を歩みました。昨夜、彼らは野球の最もエキサイティングなプレーの1つである盗塁を使用して、ウェイクフォレストのスイープを完了しました。

おいしいツイストのためにコーンブレッドであなたの次のサンドイッチを作りましょう

おいしいツイストのためにコーンブレッドであなたの次のサンドイッチを作りましょう

粗いパン粉とふわふわの食感のコーンブレッドは、唐辛子を吸い上げるのに理想的な乗り物です。しかし、それだけではありません。

別の驚くべきマーベルヒーローがキャプテンアメリカに参加します:シビルウォー!

別の驚くべきマーベルヒーローがキャプテンアメリカに参加します:シビルウォー!

ニール・ブロムカンプが、チャッピーが第10地区をどのように遅らせたのかについて話します。フォースの覚醒の噂は、次の予告編に何を期待するかについてのいじめを提供します。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language