Angular Routing

Angular routing provides you with a mechanism to create many pages of data inside your application similar to how most modern websites work.

A website does not simply offer a single page of data, but instead has links to other content. Using the Clinical Office site as an example, there are many pages of information that you can navigate to by clicking on various links. These pages require no knowledge of each other and function independently allowing you the ability to go directly to a page address (e.g. https://clinicaloffice.com/Home/Sales).

Angular offers the same type of functionality through routing where you can assign different components as pages to be accessed through links or direct URL access. Unlike standard web pages, routed components inside your application retain access to any Angular services you have included in your project.

Angular routing is presented through the <router-outlet></router-outlet> element. Any content before or after the <router-outlet></router-outlet> element will be displayed on every page allowing many possibilities for titles, menus and footers in your project.

• Open app.component.html, erase (or comment out) all the content and replace it with the following.

  <h1>My First Angular Application</h1>
  <router-outlet></router-outlet>
  <p>Footer text</p>
  

  Viewing your page will simply show the bold header "My First Angular Application", an empty line and finally the words "Footer text". The empty line is where our routed content is going to display.
• Create two new components in your project called page1 and page2 with the "ng generate component" command line statement.

  ng generate component page1
  ng generate component page2

• These two new components are not connected to anything in our application yet. Let's map them to some routes. Open app-routing.module.ts and modify the Routes array to include our two pages as default the browser to page1. You will also need to import your page1 and page2 components into the routing module.

  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  import { Page1Component } from './page1/page1.component';
  import { Page2Component } from './page2/page2.component';
  
  const routes: Routes = [
    { path: 'page1', component: Page1Component },
    { path: 'page2', component: Page2Component },
    { path: '**', redirectTo: 'page1'}
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes, {useHash: true})],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

  The two import statements expose our Page1Component and Page2Component classes to the router module. The Routes array gives us the ability to assign a path to a component or perform a redirect to another path. In our code we are mapping page1 to Page1Component and page2 to Page2Component. The default path for anything not listed in our routes will go to page1.

  The useHash property in the RouterModule import modifies the URL structure to use a HashLocationStrategy instead of the standard URL path. The path localhost:4200/page1 becomes localhost:4200/#/page1. Normally this is not needed except when you are hosting your MPage from websphere.

• View your page in the browser. You should see your page 1 content appear as shown below. Please take note of the URL displayed on browser menu bar.
• Modify the URL above to become page2 or page3. When you enter page2 you will see page2, but page3 will send you to page1 as page3 does not exist.
• Now we are going to create a simple menu to navigate between our two pages. Open app.component.html and add the following code.

  <h1>My First Angular Application</h1>
  Menu:
  <a routerLink="page1" routerLinkActive="active">Page 1</a>&nbsp;
  <a routerLink="page2" routerLinkActive="active">Page 2</a>
  <router-outlet></router-outlet>
  
  <p>Footer text</p>

• View your application in the browser. You should see our very simple looking menu which can be clicked to navigate each page.

This has been a very simple introduction to Angular routing. There is more functionality available and more documentation can be found at https://angular.io/guide/routing-overview.

Summary

By now you should have enough education in Angular to begin learning Clinical Office: MPage Edition. The material we have touched on in this course will take you far, however Angular offers many more features that will make developing MPages (and other web applications) a productive and fun experience. Further reading on Angular can be found at https://angular.io

Our MPage specific lessons will cover not only Clinical Office:MPage Edition tasks, but various Angular related techniques and products including Angular Material ( https://material.angular.io/).