For those of you diehards who held out that web forms was better than MVC, you're gonna love Angular 4.

It sure seems a lot like web forms. I'm trying to figure out how the routing working in the Angular 4 seed. It's intriguing. Consider this outermost (in terms of Russian dolls analogies) module...

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF } from '@angular/common';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AboutModule } from './about/about.module';
import { HomeModule } from './home/home.module';
import { SharedModule } from './shared/shared.module';
@NgModule({
   imports: [BrowserModule, HttpModule, AppRoutingModule, AboutModule,
         HomeModule, SharedModule.forRoot()],
   declarations: [AppComponent],
   providers: [{
      provide: APP_BASE_HREF,
      useValue: '<%= APP_BASE %>'
   }],
   bootstrap: [AppComponent]
})
export class AppModule { }

 
 

And this outermost component like so...

import { Component } from '@angular/core';
import { Config } from './shared/config/env.config';
import './operators';
@Component({
   moduleId: module.id,
   selector: 'sd-app',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.css'],
})
export class AppComponent {
   constructor() {
      console.log('Environment config', Config);
   }
}

 
 

Which uses this template...

<sd-toolbar></sd-toolbar>
<sd-navbar></sd-navbar>
<router-outlet></router-outlet>

 
 

Alright, the template for the outmost component and the index.html page that loops it in is kinda like a master page in web forms. The page guts will swap out what is at router-outlet. The nav component just offers simple links like so:

<nav>
   <a [routerLink]="['/']" [routerLinkActive]="['router-link-active']"
         [routerLinkActiveOptions]="{exact:true}">HOME</a>
   <a [routerLink]="['/about']" [routerLinkActive]="['router-link-active']"
         [routerLinkActiveOptions]="{exact:true}">ABOUT</a>
</nav>

 
 

Any one component for a "page" say about.component.ts for example in the routing paradigm to make the nav bar work has a module (about.module.ts) which itself has a routing module (about-routing.module.ts) which makes sense of routes. routing.module.ts knows what to do with '/about'

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AboutComponent } from './about.component';
@NgModule({
   imports: [
      RouterModule.forChild([
         { path: 'about', component: AboutComponent }
      ])
   ],
   exports: [RouterModule]
})
export class AboutRoutingModule { }

 
 

Cool stuff... and not too tricky.