Angular

Angular - Route Configuration and Configuration

I created my first Microservice, a simple note capturing microservice. The next step is to integrate the microservice into multiple angular applications. When I do this I would need give each application a code (ApplicationCode) and the Microservice would need to use this code to pass application specific data to the right applications.

So, my Microservice now takes an ApplicationCode to help discern which application is requesting the data.

I added code to my first application, and what I’m deciding is that the next application will contain code very similar to the first. The differences may be a bit of styling, but when launching code hitting these microservices, passing in a ApplicationCode would simplify things in general.

This page shows some of the coding used for passing parameters into the microservice based modules.

app-routing.module.ts

Here is a part of the app-routing.module.ts file

1
2
3
4
5
6
7
8
import { NoteTypeListComponent } from './note-type/note-type-list/note-type-list.component';

const routes: Routes = [
  { path: 'transactions',                    // list 
    component:TransactionListComponent }, 
  { path: 'noteTypes/:applicationKey',   // list 
    component:NoteTypeListComponent }, 
];

The second route shows a path where we pass in values

app.component.html

Here is a part of the main toolbar

1
2
3
4
5
6
7
8
9
10
11
<mat-toolbar color="primary">
  <nav>
    <a mat-button 
      [routerLink]="['/transactions']" 
      > Transactions </a> | 
    <a mat-button 
      [routerLink]="['/noteTypes', 'Checkbook']" 
      > Note Types </a>
  </nav>
 
</mat-toolbar>

The second button will call the NoteType module, and it will pass it an applicationCode of Checkbook.

When you Press the Note Types button. This Route will be activated:

1
{ path: 'noteTypes/:applicationKey', component:NoteTypeListComponent }

And the NoteTypeList component will be executed.

Here is the interesting code in the note-type-list.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

@Component({
  selector: 'note-type-list',
  templateUrl: './note-type-list.component.html',
  styleUrls: ['./note-type-list.component.css']
})

export class NoteTypeListComponent implements OnInit {
  applicationKey: string = "";

:
  constructor(
:
    private route: ActivatedRoute,  // used to get the route parameters
:    
  ) { 
  }

  ngOnInit() {
: 
    this.route.params.subscribe(params => {
      this.applicationKey = params['applicationKey'];
      console.log (`Company Key - ${this.companyKey} Application Key - ${this.applicationKey}`);
    });

  }
}