Routeur angular2 VS routeur ui-ng2 VS routeur ngrx

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

Alors maintenant, qu’en est-il d’Angular2? Je voudrais entendre par vous afin que je puisse évaluer les deux opportunités.

En outre, la recherche et la recherche 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 routeur ui pour Angular2 et le routeur ngrx ?

informations générales

NGRX Route r docs

Le routeur ngrx est obsolète ! Il existe une stratégie de migration du routeur ngrx vers le routeur Angular2 standard.

Documents Angular2 Router

  1. Solution par défaut de l’équipe Angular
  2. A été inspiré par UI-routeur de AngularJS
  3. Construit pour les composants

Angular2 Router possède presque toutes les fonctionnalités de l’interface utilisateur.

Documents du routeur d’interface utilisateur NG2

Routeur UI bien connu d’AngularJS mis à jour pour Angular2. Parmi les avantages connus, effectuez une mise à jour plus fluide du routeur-interface utilisateur AngularJS vers le routeur-interface utilisateur ng2.

Comparant

Comparons la syntaxe des routeurs UI des deux versions avec Angular2 Router.

AngularJS UI-routeur :

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

Angular2 UI-routeur :

 export let state1: Ng2StateDeclaration = { name: 'home', component: HomeComponent, url: '/home' } @NgModule({ imports: [ SharedModule, UIRouterModule.forChild({ states: [home] }) ], declarations: [HomeComponent] }) export class MyModule {} 

Angular2 Routeur :

( Mise à jour: propriété – le name été supprimé après la version V3-alpha7. Parce que cela ne fonctionnait pas 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 quasiment le même. En outre, il faut dire qu’il prend en charge la plupart des fonctionnalités communes, telles que le partage de données statiques / dynamics via les routes, les vues nestedes, 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-outlet
    • ui-sref et routerLink

Conclusion

Angular2 Router a pris le meilleur de l’expérience de l’interface utilisateur et l’a implémenté. Si vous avez besoin de migrer facilement votre base de code avec AngularJS UI-routeur vers Angular2 rapidement et en douceur, vous pouvez essayer Ng2 UI-routeur, 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, mais je pense que la communauté choisira une solution standard de l’équipe Angular, ce qui signifie un meilleur support.