47

新しい Angular2 ルーターの代わりにui-router-ng2を使用する利点と欠点は何ですか? 以前は、ネストされた状態/ルートをより適切にサポートする必要があるため、ngRoute を使用する代わりに Angular 1.x で ui-router を使用していました。

では、Angular2 はどうでしょうか。両方の機会を評価できるよう、ご連絡をお待ちしております。

その上、Googleで検索して検索すると、私が知らなかったngrx/routerが見つかりました。Angular2 の組み込みルーター、Angular2 の新しいui-routerとngrx routerの違いを教えてください。

4

1 に答える 1

60

一般情報

NGRX ルートr ドキュメント

ngrx ルーターは非推奨です! ngrx ルーターから標準の Angular2 ルーターへの移行戦略があります。

Angular2 ルーターの ドキュメント

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

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

NG2 UI ルーターの ドキュメント

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

比較する

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

AngularJS UI-router :

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 ルーター:

(更新:プロパティ - nameV3-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 Router はほとんど同じです。さらに、ルートを介した静的/動的データ共有、ネストされたビューなどの一般的な機能のほとんどをサポートしていると言う必要があります。

  • 同じロケーション戦略 (パスとハッシュ)
  • 同様のルート定義
  • 同様のサービス:
    • $state.go と Router.navigate
    • $stateParams と RouteParams
    • $state.current.data と RouteData
  • 類似のディレクティブ
    • ui-view と router-outlet
    • ui-sref と routerLink

結論

Angular2 ルーターは、UI ルーターの経験を最大限に活用して実装しました。AngularJS UI-router を使用してコード ベースを Angular2 にすばやくスムーズに移行する必要がある場合は、Ng2 UI-router を試すことができます。それ以外の場合は、Angular2 Router が最適だと思います。NG2 UI-router を使用することに決めた場合でも、すべての長所と短所を確認してください。現時点では、コミュニティは Angular チームから標準的なソリューションを選択することになると思います。つまり、より良いサポートを意味します。

于 2016-10-08T08:10:13.853 に答える