1105

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

ngRoute (angular- route.js) モジュールとui-router (angular-ui-router.js)モジュールの違いは何ですか?

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

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

4

15 に答える 15

73

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/

ここに画像の説明を入力

于 2014-12-18T13:05:44.830 に答える
35

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

于 2014-04-07T19:24:56.780 に答える
20

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

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

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

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

于 2016-01-02T22:36:08.447 に答える
18

角度 1.x

ng-ルート:

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

ng-route: URL (場所) ベースのルーティング。

元：

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

ui ルート:

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

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

元：

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

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

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

ng-router、 ui-router

于 2016-08-30T12:12:12.540 に答える
13

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

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

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

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

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

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

物事をさらに混乱させるために、Angular チームが Angular のバージョン 1.5 および 2.0 用にリリースする予定の新しい「公式」ルーティング モジュールに注目してください。これは ngRoute モジュールを置き換えます。新しい Router モジュールの現在のドキュメントは次のとおり です。実装がまだ確定していないため、この投稿の時点ではかなりまばらです。このモジュールが実際にいつリリースされるかについては、こちらをご覧ください。

于 2015-06-27T03:58:24.550 に答える
11

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

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

これは、AngularUI Router の最適な入門ガイドです。

于 2014-08-28T10:06:59.790 に答える
10

知っておくべき基本事項: ng-router の使用$location.path()と ui-router の使用$state.go

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

于 2016-10-30T00:18:18.283 に答える
6

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

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

于 2016-02-08T05:16:19.673 に答える