Fonctionnement du router d'Angular 2

Pour la documentation officielle (et exhaustive ?), voir la documentation Angular.

Le fonctionnement du routeur d'Angular 2 est complètement différent de celui d'AngularJS (version 1). Il s'inspire de ui-router mais la présentation est différente également.

Cette page devra être complétée au fur et à mesure du développement, quand l'utilisation que nous ferons du routeur se complexifiera.

L'ensemble des outils de routing se trouvent dans le module angular2/router.

#Configuration des routes

Les routes accessibles dans un composant se configurent avec l'annotation @RouteConfig. Il faut y placer la liste des routes accessibles depuis ce composant avec la syntaxe suivante:

@RouteConfig([
    { path: '/truc', as: 'Truc', component: 'TrucComponent', useAsDefault: false }
])
export class MyCmp {}

Le paramètre useAsDefault est facultatif. Il est recommandé par la documentation d'Angular de noter le paramètre as en PascalCase.

#Utilisation du router dans les templates

Les fonctionnalités du router peuvent évidemment être utilisées dans les templates, par exemple pour créer des liens et accéder à un module de l'application. Pour cela, on utiliser les directives fournies par le router, et en particulier RouterOutlet et RouterLink.

##Affichage d'un template La directive RouterOutlet permet d'afficher dynamiquement du contenu basé sur la route actuelle. Si on reprend l'exemple précédent, on place <router-outlet></router-outlet> dans le template lié à MyCmp et Angular le remplira automatiquement avec le template lié à TrucComponent lorsque l'application est sur la route /truc.

##Liens vers une route

// app.ts
@Component({
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    { path: '/main', as: 'Main', component: 'MainComponent' }
])
export class AppComponent {}

<!-- app.html -->
<a [routerLink]="['/Main']">Accueil</a>

Les paramètres sont passés à la directive sous forme d'une liste. Pour indiquer une route à la racine du système de routing, on préfixe l'alias de la route (défini par as) d'un slash. On verra dans la partie relative aux routes imbriquées que l'on peut utiliser aussi ./ et ../.

#Paramètres dans les routes Pour définir une route à paramètre, on utilise la même syntaxe qu'avec AngularJS 1 :

{ path: '/user/:id', as: 'UserDetails', component: 'UserDetailsComponent' }

On peut ensuite récupérer les paramètres dans le composant avec RouteParams.

constructor(params: RouteParams) {
    this.id = params.get('id');
};

Au niveau de la directive routerLink, on peut aussi passer des paramètres avec la syntaxe suivante :

<a [routerLink]="['/UserDetails', {id: 3}]">Dupont</a>

#Routes imbriquées

Il est possible de générer des routes imbriquées, par exemple :

• /user
• /user/:id
• /user/add
• /user/:id/edit

Pour cela, il faut commencer par spécifier lors de la définition de la route /user qu'elle pourra être "complétée". On note cela avec des points de suspension :

{ path: '/user/...', as: 'Users', component: 'UsersComponent' }

Pour le moment, je n'ai pas trouvé mieux que de créer un composant vide pour gérer les routes. Ensuite, on crée des composants spécialisés pour les actions spécifiques liées à une seule route (ex : liste des utilisateurs, détails d'un utilisateurs, etc.). Dans ce composant vide, on définit donc les routes suivantes :

@RouteConfig([
    { path: '/', as: 'List', component: UsersListComponent },
    { path: '/:id', as: 'Details', component: UserDetailsComponent }
])

Dans le template correspondant à UsersListComponent, on peut créer un lien vers le composant UserDetailsComponent avec la syntaxe suivante :

<a [routerLink]="['../Details', {id: 3}]">Dupont</a>

En effet, on est actuellement dans "l'état" /Users/List et donc on doit "remonter" d'un cran dans la hiérarchie des états pour accéder à l'état Details.

Si le composant UsersComponent n'était pas vide (par exemple une page intermédiaire avant d'accéder à la liste des utilisateurs), on pourrait accéder à UsersListComponent comme ceci:

<a [routerLink]="['./List']">Liste des utilisateurs</a>

La notation ./List indique que l'on souhaite accéder à un état fils de l'état actuel.