Adding Additional Routes

CloudApps use the native Angular routing features to allow your app to navigate from one screen to another. In this tutorial, we’ll add new routes to move from one component to another. We’ll use this methodology throughout the tutorials to add new components which show off the demonstrated features.

To create a new component, use the eca CLI. In the main directory of your app, run the following command:

$ eca generate component newroute

Files updated:
src/app/newroute/newroute.component.scss
src/app/newroute/newroute.component.html
src/app/newroute/newroute.component.ts
src/app/app.module.ts

In the routes definition of app-routing.module.ts, add the following:

{ path: 'newroute', component: NewrouteComponent },

Now in your main.component.html, you can add a link to your new route:

<a [routerLink]="['newroute']">Adding additional routes</a>

You now have added a new route to your app and a link on your main page.