web-dev-qa-db-fra.com

Routeur Angular2 VS ui-router-ng2 VS ngrx router

Quels sont les avantages et les inconvénients de l'utilisation de i-router-ng2 au lieu du nouveau routeur Angular2? Dans le passé, j'utilisais ui-router avec Angular 1.x au lieu d'utiliser ngRoute, car j'ai besoin d'un meilleur support pour les états/routes imbriqués.

Alors maintenant, qu'en est-il d'Angular2? J'aimerais vous entendre afin que je puisse évaluer les deux opportunités.

D'ailleurs, en cherchant et en cherchant sur Google, j'ai trouvé ngrx/router , que je ne connaissais pas. Pouvez-vous me dire quelles sont les différences entre le routeur intégré d'Angular2, le nouveau ui-router pour Angular2 et routeur ngrx ?

angularangular-ui-routerurl-routingangular2-routingngrx
47
smartmouse

Informations générales

Route NGRX r docs

le routeur ngrx est obsolète! Il y a stratégie de migration du routeur ngrx vers le routeur Angular2 standard.

Angular2 Routerdocs

  1. Solution par défaut de Angular team
  2. A été inspiré par le routeur UI d'AngularJS
  3. Conçu pour les composants

Le routeur Angular2 possède presque toutes les fonctionnalités du routeur UI.

NG2 UI-routerdocs

UI-router bien connu d'AngularJS mis à jour pour Angular2. Des avantages connus - facilite la mise à jour du routeur UI AngularJS vers le routeur UI ng2.

Comparant

Comparons la syntaxe du routeur UI des deux versions avec le routeur Angular2.

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

Routeur Angular2:

( Mise à jour: propriété - name a été supprimée après V3-alpha7. Parce qu'elle n'a pas fonctionné avec le chargement paresseux des routes.)

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

Comme nous pouvons le voir, en général, Angular2 Router est à peu près le même. De plus, il faut dire qu'il prend en charge la plupart des fonctionnalités communes comme le partage de données statiques/dynamiques via les itinéraires, les vues imbriquées, etc.

  • Stratégies de localisation identiques (Path et Hash)
  • Définitions de route similaires
  • Services similaires:
    • $ state.go et Router.navigate
    • $ stateParams et RouteParams
    • $ state.current.data et RouteData
  • Directives similaires
    • ui-view et routeur-prise
    • ui-sref et routerLink

Conclusion

Angular2 Router a tiré le meilleur parti de l'expérience du routeur UI et l'a mise en œuvre. Si vous avez besoin de migrer facilement et rapidement votre base de code avec AngularJS UI-router vers Angular2, vous pouvez essayer Ng2 UI-router, sinon, je pense que Angular2 Router conviendra le mieux. Même si vous avez décidé d'utiliser le routeur d'interface utilisateur NG2, vérifiez tous les avantages et les inconvénients, à l'heure actuelle, j'ai l'impression que la communauté va choisir une solution standard de l'équipe Angular, ce qui signifie un meilleur support.

56
Mikki