Angular 2 Feature Modul Leitwegbeispiel

Question

Was Angular 2 Routing geht, habe ich meistens in der Lage gewesen, Beispiele für das Szenario zu finden, wo es genau eine Routing-Datei für die gesamte Anwendung.

Ich mag würde ein Beispiel der Verwendung nicht nur eine Routing-Datei, sondern eine Haupt Routing-Datei und dann zumindest ein Merkmal Modul Routing-Datei zu sehen.

Bearbeiten: Ich weiß, dass a somewhat similar question wurde bereits gefragt und beantwortet. Es gibt zwei Gründe, warum ich finde nicht, dass man besonders hilfreich:

1) Die Frage ist sehr spezifisch für diese Situation des Benutzers und deshalb gibt es eine Menge von „Lärm“. Alles, wonach ich frage, ist ein einziges isoliertes Beispiel für das Routing von Feature-Modulen.

2) Die Antworten auf diese Frage scheinen nicht zu befassen, wie eine Routing-Datei für ein Feature-Modul erstellen und sie dann in das Haupt-Routing-App zurückzubinden. Vielleicht ist es da und ich vermisse es nur, aber ich sehe es dort nicht. Hier

Answer 1

Lassen Sie uns sehen, ob dieses Beispiel deckt, was Sie suchen.

Dies sind die Module verwendet:

• AppModule (root-Modul)
• UsersModule (Feature-Modul)

Schnipsel unter vereinfacht.

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 { } 

Benutzer.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

Beispielcode auch AboutModule enthält (faul geladenes Modul enthält Beispiel lösen), aber enthält kein Beispiel Shared Module.

können Sie weitere Informationen zu diesen Folien finden: https://slides.com/gerardsans/ngpoland-amazing-ng2-router

Answer 2

ist ein Beispiel dafür, wie ich meine Route mit Kind Routen behandeln. Ich denke, das wird Ihnen helfen und Ihnen beibringen, Kinderrouten zu verwenden, um für einige Ihrer Komponenten Guard bereitzustellen. Dadurch werden einige Ansichten gesichert, wenn dem Benutzer die Authentifizierung fehlt. Ich teile meine in public und secure Routing alles durch das Layout dann Laden der Routen für welche Layout gewählt wird.

Achten Sie auf die Kinder Routen exportieren und dass die richtigen Routen werden in der Layout-Route genannt. Stellen Sie außerdem sicher, dass Sie redirectTo in jeder untergeordneten Routen-Datei verwenden.

Wir definieren unsere Layouts öffentlich oder sicher. Dann wird die Routes-Datei in jedem dieser Verzeichnisse bereitgestellt, um sie zu übernehmen, sobald die Create-Route ausgewählt wurde.

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 } 
]; 

Dann habe ich einen Ordner Layouts

Layouts

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

secure.component.ts, die das Layout wie folgt aussieht ist,

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 { } 
} 

Dann in Ihrem sicheren Verzeichnis können Sie eine Komponente erstellen und die Vorlage auswählen, die Sie dafür verwenden werden,

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

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

    ngOnInit() { } 
} 

nun sicherstellen, dass Ihr Kind Routen in dem sicheren und öffentlichen Verzeichnis zu erstellen. Sobald die Route erreicht ist, lädt die untergeordnete Route die richtige Klasse, und die Vorlagendatei wird gerendert.

Denken Sie daran, sie werden Kinder Ihrer Layouts sein. Sie können also in secure.component.html eine Navigationsleiste und Fußzeile einfügen, die in allen Ihren sicheren Komponenten angezeigt wird. Weil wir Selektoren verwenden, um den Inhalt zu laden. Alle Ihre Komponenten sicher und öffentlich werden in die Datei html Layouts geladen.

Kind Routen /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 } 
]; 

Zusammenfassung

Wir haben Setup eine anfängliche Router-Datei im Stammverzeichnis unserer Angular2 App. Diese Routendatei leitet den Datenverkehr an eines von zwei Layouts weiter, abhängig davon, ob der Benutzer authentifiziert ist oder nicht. Wenn sie die Authentifizierung für die Route haben, für die ein öffentliches Layout oder ein sicheres Layout bereitgestellt wird. Jedes dieser Layouts enthält dann eine Reihe von untergeordneten Routen und Komponenten, die an das jeweilige Layout geliefert werden.

So die Dateistruktur zu klären,

root =/

Sie Haupt-App Routen, die steuern, welche das Layout angezeigt wird.

/app.routing.ts

Layouts, die halten die Layouts sicher oder öffentlich.

öffentliches

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

Sicheres

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

öffentliches Verzeichnis, das alles enthält, die ohne Auth anzuzeigen offen ist.

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

Sicheres Verzeichnis, das die Auth benötigte Routen und Komponenten enthält.

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