web-dev-qa-db-de.com

Angular2-Router VS-UI-Router-NG2-VS-NGRX-Router

Was sind die Vor- und Nachteile der Verwendung von i-router-ng2 anstelle des neuen Angular2-Routers? In der Vergangenheit habe ich ui-router mit Angular 1.x anstelle von ngRoute verwendet, da ich eine bessere Unterstützung für verschachtelte Zustände/Routen benötige.

Was ist nun mit Angular2? Ich würde gerne von Ihnen hören, damit ich beide Möglichkeiten bewerten kann.

Außerdem habe ich beim Suchen und Suchen auf Google ngrx/router gefunden, dass ich nicht wusste. Können Sie mir sagen, was die Unterschiede zwischen dem eingebauten Router von Angular2, dem neuen UI-Router für Angular2 und ngrx Router ?

47
smartmouse

Allgemeine Information

NGRX Route r docs

ngrx router is Veraltet! Es gibt Migrationsstrategie vom ngrx-Router zum Standard-Angular2-Router.

Angular2 Routerdocs

  1. Standardlösung vom Angular Team
  2. Wurde vom UI-Router von AngularJS inspiriert
  3. Gebaut für Komponenten

Angular2 Router verfügt über fast alle UI-Router-Funktionen.

NG2 UI-Routerdocs

Bekannter UI-Router von AngularJS für Angular2 aktualisiert. Von den bekannten Vorteilen - macht ein reibungsloseres Update von AngularJS UI-Router zu ng2 UI-Router.

Vergleichen

Vergleichen wir die Syntax von UI-Router beider Versionen mit 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 Router:

( Update: Eigenschaft - name wurde nach V3-alpha7 entfernt. Weil es nicht mit verzögertem Laden von Routen geklappt hat.)

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 {...}

Wie wir sehen können, ist Angular2 Router im Allgemeinen ziemlich ähnlich. Als Ergänzung muss gesagt werden, dass es die meisten gängigen Funktionen wie statische/dynamische Datenfreigabe über die Routen, verschachtelte Ansichten usw. unterstützt.

  • Gleiche Standortstrategien (Pfad und Hash)
  • Ähnliche Routendefinitionen
  • Ähnliche Dienste:
    • $ state.go und Router.navigate
    • $ stateParams und RouteParams
    • $ state.current.data und RouteData
  • Ähnliche Richtlinien
    • ui-view und router-outlet
    • ui-sref und routerLink

Fazit

Angular2 Router hat die besten Erfahrungen mit UI-Routern gesammelt und implementiert. Wenn Sie Ihre Codebasis mit AngularJS UI-Router schnell und problemlos auf Angular2 migrieren möchten, können Sie Ng2 UI-Router ausprobieren. Andernfalls ist Angular2 Router meiner Meinung nach am besten geeignet. Selbst wenn Sie sich für den NG2-UI-Router entschieden haben, prüfen Sie alle Vor- und Nachteile. Zum gegenwärtigen Zeitpunkt wird die Community wahrscheinlich eine Standardlösung aus dem Angular Team auswählen, was eine bessere Unterstützung bedeutet.

56
Mikki