web-dev-qa-db-ja.com

Angular2ルーターVS ui-router-ng2 VS ngrxルーター

新しいAngular2ルーターの代わりに i-router-ng2 を使用する利点と欠点は何ですか？過去には、ngRouteを使用する代わりにAngular 1.xでui-routerを使用しました。これは、ネストされた状態/ルートのより良いサポートが必要だからです。

それでは、Angular2についてはどうでしょうか。私は両方の機会を評価できるようにあなたから聞きたいです。

その上、Googleでの検索と検索で ngrx/router が見つかりましたが、知りませんでした。 Angular2のビルトインルーターと新しいui-routerAngular2およびngrx router？

angularangular-ui-routerurl-routingangular2-routingngrx
47
smartmouse

一般情報

NGRX Routerdocs

ngrx router isDeprecated！ ngrxルーターから標準のAngular2ルーターへの 移行戦略 があります。

Angular2 Routerdocs

  1. Angularチームからのデフォルトのソリューション
  2. AngularJSのUIルーターに触発された
  3. コンポーネント用に構築

Angular2ルーターには、ほぼすべてのUIルーター機能があります。

NG2 UI-routerdocs

Angular2用に更新された、AngularJSの有名なUIルーター。既知の利点から-AngularJS UIルーターからng2 UIルーターへの更新がよりスムーズになります。

比較する

UI-routerとAngular2 Routerの両方のバージョンの構文を比較してみましょう。

AngularJS UIルーター：

app.config(function($stateProvider){
    $stateProvider.state('home', {
        url: '/home',
        templateUrl: 'home.html',
        controller: 'HomeCtrl'
    })
});

Angular2 UI-router：

export let state1: Ng2StateDeclaration = {
    name: 'home',
    component: HomeComponent,
    url: '/home'
}

@NgModule({
 imports: [
   SharedModule,
   UIRouterModule.forChild({ states: [home] })
 ],
declarations: [HomeComponent]
})
export class MyModule {}

Angular2ルーター：

（Update：プロパティ-nameはV3-alpha7の後に削除されました。ルートの遅延読み込みでは動作しなかったためです。）

import {
    RouteConfig,
    Route
} from 'angular2/router';
import {HomeComponent} from './components/home';

@Component({})
@RouteConfig([
    new Route({ 
        path: '/home', 
        component: HomeComponent, 
        name: 'Home' // Deprecated property, works until v3-alpha7
    })
])
export class App {...}

ご覧のとおり、一般的に、Angular2ルーターはほぼ同じです。さらに、ルート、ネストされたビューなどを介した静的/動的データ共有などの一般的な機能のほとんどをサポートしていると言う必要があります。

  • 同じロケーション戦略（パスとハッシュ）
  • 同様のルート定義
  • 同様のサービス：
    • $ state.goおよびRouter.navigate
    • $ stateParamsおよびRouteParams
    • $ state.current.dataおよびRouteData
  • 同様のディレクティブ
    • uIビューとルーターアウトレット
    • ui-srefおよびrouterLink

結論

Angular2 Routerは、UIルーターの経験を最大限に活用して実装していました。 AngularJS UIルーターを使用してコードベースを簡単かつ迅速にAngular2に移行する必要がある場合は、Ng2 UIルーターを試すことができます。そうでない場合は、Angular2ルーターが最適です。 NG2 UIルーターを使用することに決めたとしても、すべての長所と短所を確認してください。現時点では、コミュニティはAngularチームから標準ソリューションを選択するように感じています。

56
Mikki