L’utilisation des routes en Angular

23 Avr L’utilisation des routes en Angular

Supposant qu’on a deux dossier home et about qui contiennent deux Components home.component.ts et about.component.ts . Pour savoir comment créer un Component vous pouvez cliquer ici

Etape 1 :

On doit créer un fichier app.routing.ts situé dans la répertoire app

/* La Structure de créer un fichier du route */

import { Routes, RouterModule } from '@angular/router';

/* On importe ici nos deux Components */
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';


const routing: Routes = [
  { path: '', pathMatch:'full', redirectTo: '/home' },
  { path: 'home', component: HomeComponent    },
  { path: 'about', component: AboutComponent  }
  /*
  On les insére ici { 
                     path: ' EXEMPLE contact ' , 
                     component: LE_NOM_DU_COMPONENT 
                     }
  */
];

export const routing = {
  routes: RouterModule.forRoot(routing),
  components: [ 
                HomeComponent , AboutComponent
                /*
                  De Même ici on insére ici séparer par une virgule
                */ 
              ]
};

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...

import { AppComponent }  from './app.component';

/* 
On ajoute ici notre component routing 
Et dans la partie imports on ajoute app_routing.routes
Et dans la partie desclarations on ajoute app_routing.components
*/
import { routing } from './app.routing';

@NgModule({
  imports:      [ BrowserModule, FormsModule, ReactiveFormsModule, routing.routes ],
  declarations: [ AppComponent, routing.components ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Etape 3 :

Dans notre fichier principale index.html on doit ajouter une ligne dans la partie head

<base href="/">

Etape 4 :

Dans notre app.component.ts on va créer une view template.component.html

/* fichier app.component.ts */
import { Component } from '@angular/core';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

@Component({
  selector: 'my-app',
  templateUrl: './template.component.html',
  directives: [ HomeComponent, AboutComponent ]
})
export class AppComponent  {  }

Contenu du fichier template.component.html

/* fichier template.component.html */

<ul>
  	<li>
    	<a routerLink="/home">Home</a>
  	</li>
  	<li>
    	<a routerLink="/about">About</a>
  	</li>
</ul>
<router-outlet></router-outlet>