私は私の大きなアプリケーションでAngularJSを使うことを計画しています。だから私は使用するための正しいモジュールを見つけるための過程にあります。
ngRoute(angular-route.js) と ui-router(angular-ui-router.js) modulesの違いは何ですか?
ngRoute が使用されている多くの記事では、routeは $ routeProvider で設定されています。ただし、 ui-router と共に使用すると、routeは $ stateProviderおよび$ urlRouterProvider で構成されます。
より良い管理性と拡張性のためにどのモジュールを使うべきですか?
ui-router はサードパーティ製のモジュールで非常に強力です。これは通常のngRouteができることすべてをサポートするだけでなく、多くの追加機能をサポートします。
以下は、ngRouteよりもui-routerが選択される一般的な理由です。
ui-routerは ネストされたビュー と 複数の名前付きビュー を許可します。あなたが他のセクションから継承するページを持っているかもしれないところで、これはより大きなアプリで非常に役に立ちます。
ui-routerを使用すると、状態名に基づいて状態間で強力な型のリンクを作成できます。 ui-sref
を使用してリンクを作成すると、URLを1か所で変更すると、すべてのリンクがその状態に更新されます。 URLが変わる可能性がある大規模プロジェクトに非常に便利です。
デコレータ の概念もあります。これは、アクセスしようとしているURLに基づいてルートを動的に作成できるようにするために使用できます。これは、あなたがすべてのルートを手元に指定する必要がないということを意味するかもしれません。
states を使用すると、さまざまな状態に関するさまざまな情報をマップしてアクセスすることができ、 $stateParams
を使用して状態間で情報を簡単に渡すことができます。
$state
を介してテンプレート内のUI要素を調整し(現在の状態のナビゲーションをハイライト表示する)状態または状態の親になっているかどうかを簡単に判断できます。 run
の$rootScope
にあります。
本質的には、ui-routerはより多くの機能を備えたngRouterです。これらの追加機能は大規模なアプリケーションに非常に役立ちます。
詳しくは:
ngRoute はAngularJSチームによって開発されたモジュールで、以前はAngularJSコアの一部でした。
ui-router はルーティング機能を改善し強化するためにAngularJSプロジェクトの外で作られたフレームワークです。
Ui-router のドキュメントから :
AngularUIルーターはAngularJSのルーティングフレームワークで、インターフェイスの一部をステートマシンにまとめることができます。 URLルートを中心に構成されているAngular coreの$ routeサービスとは異なり、UI-Routerはオプションで他の動作と同様にルートを添付できる状態を中心に構成されています。
ステートは名前付き、ネスト、およびパラレルビューにバインドされているため、アプリケーションのインターフェイスを強力に管理できます。
どちらも良いわけではありませんが、プロジェクトに最も適したものを選択する必要があります。
しかし、あなたがあなたのアプリケーションの中で複雑なビューを持つことを計画していて、あなたが "$ state"の概念を扱いたいのであれば。私はあなたがUIルーターを選択することをお勧めします。
ngRouteは基本的なシナリオに適している角度コアモジュールです。今後のリリースで、より強力な機能が追加されると思います。
URL: https://docs.angularjs.org/api/ngRoute
UiルーターはngRouteの問題を克服している貢献モジュールです。主にネスト/複合ビュー。
URL: https://github.com/angular-ui/ui-router
Ui-routerとngRouteの違いのいくつか
ngRouteはコアAngularJSフレームワークの一部です。
ui-routerは、デフォルトのルーティング機能を向上させるために作成されたコミュニティライブラリです。
これは、ui-routerの設定/設定に関する良い記事です。
NgRouteパラダイムに実装されているネストされたビュー機能を利用したい場合は、 angular-route-segment - を試してください。代わりにngRouteを拡張することを目的としています。
Angular 1.x
ng-route :
ng-routeはルーティングのためにangularJSチームによって開発されました。
ng-route: url(ロケーション)ベースのルーティング。
例:
$routeProvider
.when("/home", {
templateUrl : "home.html"
})
ui-route :
uIルータは、サードパーティ製のモジュールによって開発されています。
ui-router: 状態ベースのルーティング
例:
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
})
- > ui-routerは入れ子になったビューを可能にします
- > ui-routerよりng-routeより強力
一般的にui-routerは状態メカニズムで動作します...簡単な例で理解することができます。
音楽ライブラリの大きなアプリケーションがあるとしましょう(..gaanaやsaavan、その他のものなど)。そしてページの一番下には、ページのすべての状態で共有されているミュージックプレーヤーがあります。
それでは、いくつかの曲をクリックして再生するとしましょう。この場合、全ページを再ロードするのではなく、その音楽プレーヤーの状態だけを変更する必要があります。それはui-routerによって簡単に処理することができます。
NgRouteに入っている間に、ビューとコントローラを接続するだけです。
ngRouteはAngularチームによって構築されたモジュールで、基本的なクライアントサイドのルーティング機能を提供します。このモジュールはルーティングのためのかなり強力な基盤を提供し、しっかりとしたルーティング機能を与えるために非常に簡単に構築することができます。 このブログ記事 著者 - 彼らはAngularプロのカップルです)
uIルーターは、URL中心の経路からアプリケーションの "状態"にフォーカスを移します。これは、URLに反映される場合と反映されない場合があります。
Ui-routerによって追加された主な機能は、入れ子になった状態と名前付きビューです。
入れ子の状態を使用すると、アプリケーションのさまざまな部分に対してコントローラロジックを分離できます。この非常に単純な例は、上部にプライマリナビゲーション、左側にセカンダリナビゲーションリスト、右側にコンテンツがあるアプリです。入れ子になった状態がなければ、単一のコントローラは通常、コンテンツだけでなくセカンダリナビゲーションの表示ロジックも処理する必要があります。ネストルーティングを使用すると、これらの問題を切り分けることができます。
名前付きビューは、ui-routerのもう1つの追加機能です。 ngRouteでは、1つのページに1つのngViewディレクティブしか持てませんが、ui-routerの名前付きビューでは複数のui-viewディレクティブを指定でき、各状態は名前ビューのテンプレートとコントローラに影響を与えることができます。これの非常に単純な例は、あなたのアプリのメインコンテンツをプライマリビューにして、それから別のUIビューになるフッターバーを持つことです。このシナリオでは、フッターのコントローラーは状態やルートの変更をリスンする必要がなくなりました。
NgRouteとui-routerの良い比較は このポッドキャスト エピソードで見つけることができます。
混乱させないために、AngularチームがAngularのバージョン1.5および2.0用にリリースすることを期待している新しい「公式の」ルーティングモジュールに注目してください。これでngRouteモジュールが置き換えられます。 ここ は新しいRouterモジュールのための現在のドキュメントです - 実装がまだ完成していないのでそれはこの投稿の時点でかなりまばらです。このモジュールが実際にリリースされる時期についてのさらなるニュースは here をご覧ください。
ngRouteは基本的なルーティングライブラリで、どのルートにもビューとコントローラを1つだけ指定できます。
Ui-routerでは、並列ビューと入れ子ビューの両方で複数のビューを指定できます。あなたのアプリケーションが何らかの種類の複雑なルーティング/ビューを必要とする場合(あるいは将来必要になるかもしれない場合)、ui-routerを使用してください。
これ はAngularUI Routerの入門ガイドとして最適です。
知っておくべき基本事項: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ルートを中心に編成されているAngularngRouteモジュールの$ routeサービスとは異なり、UI-Routerはオプションでルートやその他の動作を付加できるステートを中心に編成されています。
ngRouteは、以前はAngularコアの一部だったAngular.jsチームによって開発されたモジュールです。
ui-routerはルーティング機能を改善し強化するためにAngular.jsプロジェクトの外で作られたフレームワークです。
1- ngRouteはAngularチームによって開発されていますが、ui-routerはサードパーティ製のモジュールです。 2- ngRouteはルートURLに基づいてルーティングを実装しますが、ui-routerはアプリケーションの状態に基づいてルーティングを実装します。 3- ui-routerは、ng-routeが提供するすべてのものに加えて、ネスト状態や複数の名前付きビューなどのいくつかの追加機能を提供します。
ng-View
(AngularJSチームによって開発された)はページごとに1回しか使用できませんが、ui-View
(サードパーティモジュール)はページごとに複数回使用できます。
したがってui-View
が最良の選択肢です。