Setting up basic routing in Angular

Now let's set up the routing. Let's make it so that if the URL /aaaa/ is entered in the browser's address bar, the first component is shown, and if /bbbb/ is entered, the second one is shown.

This setup is done in the app.routes.ts file. First, we need to import our components:

import { AaaaComponent } from './aaaa/aaaa.component';
import { BbbbComponent } from './bbbb/bbbb.component';

Now we need to tell which URL corresponds to which component. To do this, we need to create a special array of objects with routes (routes). Each object will have a key path, which specifies the URL (without the end slashes), and a key component, which specifies the component that is shown at this URL:

export const routes: Routes = [
	{ path: 'aaaa', component: AaaaComponent },
	{ path: 'bbbb', component: BbbbComponent },
];

Setting up the routing, however, is not enough. We need to specify in the parent component the location where our components will be output. We will do this in the next lesson.

Set up routing in the app.routes.ts file.