Rangle.io : Angular Training
Search…
Configuring Routes
The scaffolding for Angular Routing can be generated automatically when creating a new application using the angular cli. This section describes manually adding routing to an existing application.
Base URL Tag
The Base URL tag must be set within the
<head> tag of index.html:1
<base href="/">
Copied!
In the demos we use a script tag to set the base tag. In a real application it must be set as above.
Route Definition Object
The
Routes type is an array of routes that defines the routing for the application. This is where we can set up the expected paths, the components we want to use and what we want our application to understand them as.Each route can have different attributes; some of the common attributes are:
- path - URL to be shown in the browser when application is on the specific route
- component - component to be rendered when the application is on the specific route
- redirectTo - redirect route if needed; each route can have either component or redirect attribute defined in the route (covered later in this chapter)
- pathMatch - optional property that defaults to 'prefix'; determines whether to match full URLs or just the beginning. When defining a route with empty path string set pathMatch to 'full', otherwise it will match all paths.
- children - array of route definitions objects representing the child routes of this route (covered later in this chapter).
Below is the sample
Routes array definition:1
const routes: Routes = [
2
{ path: 'component-one', component: ComponentOne },
3
{ path: 'component-two', component: ComponentTwo }
4
];
Copied!
RouterModule
RouterModule.forRoot takes the Routes array as an argument and returns a configured router module. The following sample shows how we import this module in an app.routes.ts file.app/app.routes.ts
1
...
2
import { RouterModule, Routes } from '@angular/router';
3
​
4
const routes: Routes = [
5
{ path: 'component-one', component: ComponentOne },
6
{ path: 'component-two', component: ComponentTwo }
7
];
8
​
9
export const routing = RouterModule.forRoot(routes);
Copied!
We then import our routing configuration in the root of our application.
app/app.module.ts
1
...
2
import { routing } from './app.routes';
3
​
4
@NgModule({
5
imports: [
6
BrowserModule,
7
routing
8
],
9
declarations: [
10
AppComponent,
11
ComponentOne,
12
ComponentTwo
13
],
14
bootstrap: [ AppComponent ]
15
})
16
export class AppModule {
17
}
Copied!
Last modified 9mo ago
Copy link