Angular, router small example

Here you will find my notes. I created very simple app base on https://angular.io/guide/router

Git

– https://github.com/szalek/AngularRoutExample

Setup

ng new AngularRoutExample
ng g c home
ng g c profile
ng g c settings
ng g c password

Run app

ng serve --watch true --poll 100 --host 0.0.0.0 --port 4200 -o

Docker

This step is not required, but if you don’t want to install node on you local you can use docker
– http://blog.michalszalkowski.com/docker/angular-cli-in-docker/

Project structure

Main file with routing configuration (app.module.ts)

...
const appRoutes: Routes = [
  {path: '', component: HomeComponent},
  {
    path: 'profile',
    component: ProfileComponent,
    children: [
      {
        path: 'password',
        component: PasswordComponent
      }, {
        path: 'settings',
        component: SettingsComponent
      }
    ]
  },
];
...
imports: [
    RouterModule.forRoot(appRoutes),
    ...
  ],
...

Other files

All other files has default content. Only two files, you have to modify

app.component.html

<nav>
  <a routerLink="/" routerLinkActive="active">Home</a>
  <a routerLink="/profile" routerLinkActive="active">Profile</a>
</nav>

<router-outlet></router-outlet>

profile.component.html

<h1>
  profile works!
</h1>

<nav>
  <a routerLink="/profile/settings" routerLinkActive="active">Settings</a>
  <a routerLink="/profile/password" routerLinkActive="active">Password</a>
</nav>

<router-outlet></router-outlet>