web-dev-qa-db-fra.com

Angular 2 exemple de routage de module de fonctionnalité

En ce qui concerne Angular 2 va, j'ai surtout pu trouver des exemples du scénario où il y a exactement un fichier de routage pour toute l'application.

J'aimerais voir un exemple d'utilisation non pas d'un seul fichier de routage, mais d'un fichier de routage principal, puis d'au moins un fichier de routage de module de fonctionnalité.

Edit : Je me rends compte que ne question quelque peu similaire a déjà été posée et répondue. Il y a deux raisons pour lesquelles je ne trouve pas celle-là particulièrement utile:

1) La question est très spécifique à la situation de cet utilisateur et il y a donc beaucoup de "bruit". Tout ce que je demande, c'est un seul exemple isolé de routage de module de fonctionnalité.

2) Les réponses à cette question ne semblent pas indiquer comment créer un fichier de routage pour un module de fonctionnalités, puis le lier de nouveau au routage principal de l'application. Peut-être que c'est là et que je le manque juste mais je ne le vois pas là.

angularrouting
24
Jason Swett

Voyons si cet exemple couvre ce que vous recherchez.

Ce sont les modules utilisés:

  • AppModule (module racine)
  • UsersModule (module de fonctionnalité)

Les extraits ci-dessous sont simplifiés.

app.module.ts

import { UsersModule } from './users.module';
import { AppRouting } from './app.routing';

@NgModule({
  imports: [
    BrowserModule,
    UsersModule,
    AppRouting,
  ],
  declarations: [...],
  providers: [...],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.routing.ts

const appRoutes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: Home },
  { path: '**', component: NotFound }, //always last
];

export const AppRouting = RouterModule.forRoot(appRoutes, { 
  useHash: true
});

users.module.ts

import { NgModule } from '@angular/core';
import { UsersRouting } from './users.routing';

@NgModule({
  imports: [
    CommonModule, // ngFor, ngIf directives
    UsersRouting,
  ],
  declarations: [...],
  providers: [...]
})
export class UsersModule { }

users.routing

const usersRoutes: Routes = [
  { path: 'users',
    children: [
      { path: '', component: Users },
      { path: ':id', component: User }
    ]
  }
];

export const UsersRouting = RouterModule.forChild(usersRoutes);

Plunker: http://plnkr.co/edit/09Alm0o4fV3bqBPUIFkz?p=preview

L'exemple de code comprend également AboutModule (module chargé paresseux, inclut un exemple de résolution) mais ne comprend pas d'exemple de module partagé.

Vous pouvez trouver plus de détails sur ces diapositives: https://slides.com/gerardsans/ngpoland-amazing-ng2-router

47
Gerard Sans

Voici un exemple de la façon dont je gère mon routage avec des itinéraires enfants. Je pense que cela vous aidera et vous apprendra à utiliser les routes enfants pour fournir Guard pour certains de vos composants. Cela sécurisera certaines vues si l'utilisateur n'a pas d'authentification. Je sépare le mien dans public et secure tout routage à travers la mise en page puis en chargeant les routes pour lesquelles la mise en page est choisie.

Assurez-vous d'exporter les itinéraires enfants et que les itinéraires corrects sont appelés dans l'itinéraire de mise en page. Assurez-vous également que vous utilisez redirectTo dans chaque fichier de routes enfants.

Nous définissons nos mises en page publiques ou sécurisées. Ensuite, fournir le fichier de routes dans chacun de ces répertoires pour prendre le relais une fois que la route de création est choisie.

app.routing.ts

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full', },
    { path: '', component: PublicComponent, data: { title: 'Public Views' }, children: PUBLIC_ROUTES },
    { path: '', component: SecureComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: SECURE_ROUTES }
];

Ensuite, j'ai un dossier de mises en page

mises en page

layouts/public/public.components.ts
layouts/public/public.components.html
layouts/secure/secure.components.ts
layouts/secure/secure.components.html

secure.component.ts qui est la disposition ressemble à ceci,

import { Component, OnInit }        from '@angular/core';
import { Router }                   from '@angular/router';
import { Auth }                     from './../services/auth.service';

@Component({
    providers: [ Auth ],
    selector: 'app-dashboard',
    templateUrl: './secure.component.html'
})
export class SecureComponent implements OnInit {

    constructor( private router: Router, private auth: Auth ) { }

    ngOnInit(): void { }
}

Ensuite, dans votre répertoire sécurisé, vous pouvez créer un composant et sélectionner le modèle que vous utiliserez pour lui,

@Component({
    providers: [ Auth ],
    templateUrl: './profile.component.html'
})
export class ProfileComponent implements OnInit {

    constructor( private router: Router, private auth: Auth, private http: Http  ) { }

    ngOnInit() { }
}

Assurez-vous maintenant de créer vos itinéraires enfants dans le répertoire sécurisé et public. Une fois que l'itinéraire est atteint, l'itinéraire enfant chargera la classe correcte et le fichier modèle sera rendu.

N'oubliez pas qu'ils seront les enfants de vos mises en page. Vous pouvez donc mettre une barre de navigation et un pied de page dans secure.component.html et ils apparaîtront dans tous vos composants sécurisés. Parce que nous utilisons des sélecteurs pour charger le contenu. Tous vos composants sécurisés et publics seront chargés dans le répertoire à l'intérieur du fichier layouts html.

itinéraires enfants/ public/piublic.routes.ts

export const PUBLIC_ROUTES: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'p404', component: p404Component },
    { path: 'e500', component: e500Component },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: 'home', component: HomeComponent }
];

/ secure/secure.routes.ts

export const SECURE_ROUTES: Routes = [
    { path: '', redirectTo: 'overview', pathMatch: 'full' },
    { path: 'items', component: ItemsComponent },
    { path: 'overview', component: OverviewComponent },
    { path: 'profile', component: ProfileComponent },
    { path: 'reports', component: ReportsComponent }
];

Résumé

Nous avons configuré un fichier de routage initial dans le répertoire racine de notre Angular2 app. Ce fichier de routage dirige le trafic vers l'une des deux dispositions selon que l'utilisateur est authentifié ou non. S'ils ont l'authentification pour n'importe quelle route, la mise en page publique ou la mise en page sécurisée est desservie. Ensuite, chacune de ces dispositions a un tas de routes et de composants enfants qui sont servis à la disposition respective.

Donc, pour effacer la structure des fichiers,

root = /

Vos principaux itinéraires d'application qui contrôlent la disposition affichée.

/app.routing.ts

Mises en page qui maintiennent les mises en page sécurisées ou publiques.

Public

`/layouts/public.components.ts
/layouts/public.components.html
/layouts/public.routing.ts`

Sécurisé

`/layouts/secure.components.ts
/layouts/secure.components.html
/layouts/secure.routing.ts`

répertoire public qui contient tout ce qui est ouvert à la visualisation sans authentification.

/public/home-component.ts
/public/home-component.html

Répertoire sécurisé contenant les routes et composants nécessaires à l'authentification.

/public/profile-component.ts
/public/profile-component.html
2
wuno