Angulaire 2 modules de routage exemple

Que la mesure Angulaire 2 de routage va, j'ai surtout été en mesure de trouver des exemples de scénario où il y a exactement un fichier de routage pour l'ensemble de l'application.

J'aimerais voir un exemple de l'aide, non pas simplement un fichier de routage, mais un fichier de routage principal et au moins un module de fonction de routage de fichiers.

Modifier: je me rends compte que un peu le même question a déjà été posées et répondues. Il y a deux raisons pour lesquelles je ne trouve pas que l'un particulièrement utiles:

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

2) Les réponses à cette question ne semble pas traiter de la façon de créer un fichier de routage pour une fonctionnalité module, puis attachez-les dans l'application principale de routage. Peut-être qu'il est là et je suis juste en manque, mais je ne vois pas, là.

angular.io/docs/ts/latest/guide/router.html
J'ai vu les docs. Je n'ai pas trouvé ce que j'ai vu il y a très satisfaisant pour ce but.
Même pas de la partie, ils ont mentionné la façon dont nous pouvons avoir un fichier de routage pour chaque module? Je pense que vous pouvez rechercher pour " Nous vous recommandons de donner à chaque zone de fonctionnalité de son propre itinéraire fichier de configuration.' dans cette page de doc et de continuer la partie.
Double Possible de Angular2 RC6 - Imbriqués modules de routage
Voir l'exemple de BLog app Angulaire 2 et Strongloop(loopback) en tant que service rest github.com/tabvn/angular-blog
Non, même pas de la partie. J'avais vu que la partie avant de poster cette question. J'ai trouvé que l'exemple de la confusion, particulièrement lorsqu'il est mélangé avec un énorme long de la page, la valeur de trucs. Ce que je voudrais vraiment voir, et je ne pense pas déraisonnable de demander, est un cas isolé, simple possible d'exemple.

InformationsquelleAutor Jason Swett | 2016-11-27

angular routing

Nous allons voir si cet exemple couvre ce que vous cherchez.

Ce sont les modules utilisés:

AppModule (module racine)
UsersModule (modules)

Les extraits ci-dessous sont simplifiées.

app.le 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.le routage.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
});

utilisateurs.le module.ts

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

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

utilisateurs.routage

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

Exemple de code comprend également AboutModule (paresseux module chargé, comprend résoudre exemple) mais ne comprend pas un Module Partagé exemple.

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

merci pour la réponse concise, l'angle de docs faire le Routage complet @NgModule, ne le savais pas, j'ai juste l'exporter sous la forme d'un const.. pratique!
Je ne suis pas qu'au plus profond de la matière, donc est-il un avantage ou une raison précise pour laquelle vous avez exporté comme const au lieu de @NgModule class comme il est dans le angular/cli généré app-routing.module.ts?
Ce qui manque ici est de savoir comment vous obtenez à partir de AppMoudle à UserModule. Il n'y a pas de chemin dans la racine de routage qui pointe à l'utilisateur

InformationsquelleAutor Gerard Sans

2

Voici un exemple de la façon dont je gère mon routage avec enfant routes. Je pense que cela va vous aider et vous apprendre à utiliser l'enfant routes pour offrir Guard pour certains de vos composants. Cela permettra de fixer certains points de vue, si l'utilisateur est en manque d'authentification. Je me sépare de la mine dans public et secure de routage tout par le biais de la mise en page puis en chargeant les routes pour lesquelles jamais mise en page est choisi.

Assurez-vous d'exportation de l'enfant routes et que les bons itinéraires sont appelés dans la mise en page de l'itinéraire. Assurez-vous également que vous utilisez redirectTo à chaque enfant un fichier de routes.

Nous sommes à la définition de nos mises en page public ou de sécurité. Ensuite fournir le fichier de routes dans chacun de ces répertoires à prendre le relais une fois la création de la route est repris.

app.le routage.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 dispositions

dispositions
```
layouts/public/public.components.ts
layouts/public/public.components.html
layouts/secure/secure.components.ts
layouts/secure/secure.components.html
```
sécurisé.composante.ts qui est de la mise en page 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 { }
}
```
Puis dans votre répertoire sécurisé, vous pouvez créer un composant et sélectionnez le modèle que vous utiliserez pour cela,
```
@Component({
    providers: [ Auth ],
    templateUrl: './profile.component.html'
})
export class ProfileComponent implements OnInit {

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

    ngOnInit() { }
}
```
Maintenant, assurez-vous de créer votre enfant routes dans la sécurité publique et de répertoire. Une fois que la route est de frapper l'enfant itinéraire charger le bon de classe et le modèle de fichier sera rendu.

N'oubliez pas qu'ils seront des enfants de votre mise en page. Ainsi, vous pouvez mettre une barre de navigation et le pied de page dans secure.component.html et il s'affichera dans l'ensemble de vos composants sécurisés. Parce que nous sommes à l'aide de sélecteurs pour charger le contenu. Tous vos composants sécurisé et public sera chargé dans le selctory à l'intérieur de la mises en page html fichier.

enfant routes
/public/piublic.les itinéraires.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.les itinéraires.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 mis en place une première déroute fichier dans le répertoire racine de notre Angular2 app. Ce fichier de route qui dirige le trafic vers l'une des deux mises en page en fonction de si l'utilisateur est authentifié ou non. Si ils ont l'authentification pour quelle que soit la voie publique mise en page ou mise en page sécurisée de l'iss servi. Ensuite, chacun de ces dispositions ont un tas d'enfants routes et des composants qui sont servis à la mise en page.

Donc pour effacer le fichier de structure,
```
root = /
```
Vous de l'application principale des routes de contrôle de la mise en page est affiché.

/app.routing.ts

Dispositions qui détiennent les mises en page sécurisée ou public.

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 détient tout ce qui est ouverte à vue sans auth.
```
/public/home-component.ts
/public/home-component.html
```
Répertoire sécurisé qui tient la auth besoin de routes et de composants.
```
/public/profile-component.ts
/public/profile-component.html
```
InformationsquelleAutor wuno

Vous devez vous connecter pour publier un commentaire.