CODEWITHSUNDEEP
angularangular-ui-router
tommyc38
tommyc38

Reputation: 741

Angular 2 Architecture: ngModules & Router

I am going to build a website but have some confusion on architecture. Typically websites have a "home" app. Specifically, this is where you market your main application, offer Q&A, blog, contact us, pricing, etc. which can be quite large. Once a user logs into the system then they then enter the "main" application.

The problem is that there is only one router outlet and both applications have completely different navigation menus that are available on every route. If I have HomeModule and MainModule under AppModule, should I use *ngIf for my nav/menues components for each respective application with one router outlet in AppComponent's template? I am just really unclear how you go about navigating between two completely different applications with their own menus and only one router-outlet. The other option would be to include nav/menus/footers on every template for HomeModule and MainModule and essentially only have router-outlet in AppComponent's template which isn't a scalable solution.

Any help would be greatly appreciated.

Upvotes: 0

Views: 65

Answers (1)

DeborahK
DeborahK

Reputation: 60518

Here is an example:

app.component.html

<router-outlet></router-outlet>

Views with "no shell" such as the login are routed here. As is the "shell" component.

shell.component.html

<pm-menu></pm-menu>

<div class='container'>
    <router-outlet></router-outlet>
</div>

All other pages are routed to this child router outlet.

I only have one "shell", but you could easily have a "home shell" and a "main shell" Both would be routed to the main app component's router outlet.

The routes would then look something like this:

RouterModule.forRoot([
    { 
        path: 'app', 
        component: MainShellComponent,
        children: [
            { path: 'page1', component: Page1Component },
            { path: 'page2', component: Page2Component },
        ]
    },
    {
        path: '',
        component: HomeShellComponent,
        children: [
            { path: 'welcome', component: WelcomeComponent },
            { path: '', redirectTo: 'welcome', pathMatch: 'full' },
        ]
    },
    { path: '**', component: PageNotFoundComponent }
])

Upvotes: 1

Related Questions