Routeur Angular2 VS ui-routeur-ng2 VS routeur ngrx

Question

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

Et maintenant, qu'en est-il d'Angular2 ? J'aimerais que vous me contactiez pour que je puisse évaluer les deux possibilités.

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

Answer 1

Informations générales

Route NGRX r docs

Le routeur ngrx est Déprécié ! Il y a stratégie de migration du routeur ngrx au routeur Angular2 standard.

Routeur Angular2 docs

1. Solution par défaut de l'équipe Angular
2. Inspiré par UI-router d'AngularJS
3. Construit pour les composants

Angular2 Router possède presque toutes les fonctionnalités de UI-router.

NG2 UI-routeur docs

Routeur UI bien connu d'AngularJS mis à jour pour Angular2. Des avantages connus - fait une mise à jour plus lisse de AngularJS UI-router à ng2 UI-router.

Comparaison de

Comparons la syntaxe des deux versions de UI-router avec celle de Angular2 Router.

AngularJS UI-routeur :

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é après 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, le routeur Angular2 est à peu près le même. Il faut ajouter qu'il supporte la plupart des fonctionnalités communes comme le partage de données statiques/dynamiques à travers les routes, les vues imbriquées, etc.

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

Conclusion

Angular2 Router a pris le meilleur de l'expérience UI-router et l'a implémenté. Si vous avez besoin de migrer facilement votre base de code avec AngularJS UI-router à Angular2 rapide et en douceur, vous pouvez essayer Ng2 UI-router, sinon, je pense Angular2 Router sera le mieux adapté. Même si vous décidez d'utiliser NG2 UI-router, vérifiez tous les avantages et les inconvénients, au point actuel, je sens que la communauté va choisir une solution standard de l'équipe Angular qui signifie un meilleur soutien.