Diese Seite (Version-1) wurde zuletzt am 14-Apr.-2018 12:19 von Administrator geändert.

Du bist nicht autorisiert, diese Seite umzubenennen.

Du bist nicht autorisiert, diese Seite zu löschen.

Versionsgeschichte der Seite

Version Zuletzt geändert Größe Autor Änderungen Kommentar

Links

Eingehende Links Ausgehende Links
Angular Routing
Angular Routing

Versionsunterschiede

Unterschiede zwischen Version und .

Zeile 1: 91 Zeilen hinzugefügt.
[{ALLOW view All}]
[{ALLOW edit Authenticated}]
!!Routing
{{{
npm install @angular/router --save
}}}
*router definition
*router content: <router-outlet> (dynamic content)
*(~[routerLink]}
* RouterModule.forRoot(appRoutes);
* RouterModule.forChild(appRoutes);
* declarations: ~[<components-array>,...
app.routing.ts:
{{{
import {Routes, RouterModule, RouterStateSnapshot, ActivatedRouteSnapshot} from '@angular/router';
import {DashboardComponent} from './dashboard/dashboard.component';
import {SettingsComponent} from './settings/settings.component';
import {AboutComponent} from './about/about.component';
import {LoginComponent, LoginGuard, UserResolver} from './login/index';
import {NotFoundComponent} from './not-found/not-found.component';
import {tasksRoutes, tasksRoutingComponents, tasksRoutingProviders} from './tasks/tasks.routing';
import {ChatComponent} from './chat-component/chat.component';
import {RESOLVED_TOKEN} from './app.tokens';
export const appRoutes: Routes = [
{path: 'dashboard', component: DashboardComponent, data: {title: 'Startseite'}}, // Dashboard unter /dashboard
{path: '', redirectTo: '/dashboard', pathMatch: 'full'},
{
path: 'settings', component: SettingsComponent,
data: {
title: 'Einstellungen'
},
resolve: {
user: UserResolver,
token: RESOLVED_TOKEN
}
},
{path: 'about', component: AboutComponent, data: {title: 'Über uns'}},
{path: 'login', component: LoginComponent},
{path: 'chat', component: ChatComponent, outlet: 'bottom'},
{path: 'tasks', canActivate: [LoginGuard], children: tasksRoutes},
/** Redirect Konfigurationen **/
{path: '**', component: NotFoundComponent}, // immer als letztes konfigurieren - erste Route die matched wird angesteuert
];
export const appRouting = RouterModule.forRoot(appRoutes);
export const routingComponents = [DashboardComponent, SettingsComponent, AboutComponent, LoginComponent, ChatComponent, NotFoundComponent,
...tasksRoutingComponents];
}}}
app.module.ts:
{{{
import {routingComponents, appRouting, routingProviders} from './app.routing';
@NgModule({
imports: [BrowserModule, FormsModule, ReactiveFormsModule,
appRouting],
entryComponents: [AppComponent],
providers: [
routingProviders,
LoginService,
Title,
{provide: AUTH_ENABLED, useValue: true},
TaskService
],
declarations: [AppComponent,
routingComponents,
ShowErrorComponent,
APPLICATION_VALIDATORS],
bootstrap: [AppComponent]
})
}}}
app.component.html:
{{{
<a routerLink='/'>Start</a>
<a routerLink='/settings'>Settings</a>
...
<router-outlet></router-outlet>
}}}
Diese Seite (Version-1) wurde zuletzt am 14-Apr.-2018 12:19 von Administrator geändert.Top