/angular/

Angular, router small example

2017-12-28 15:15:40

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

Git

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/

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


# 
 profile works!

<nav>
<a routerlink='"/profile/settings"' routerlinkactive='"active"'>Settings</a>
<a routerlink='"/profile/password"' routerlinkactive='"active"'>Password</a>
</nav>

<router-outlet></router-outlet>