Angular Routing
11
Routing
• The base href was set in index.html by the CLI when creating our project This tells the router that our application starts from the root.
• To create a routing module, generate it from the CLI ng g module app-routing
• This makes a new app-routing.module.ts file and registers the routing module in app.module
12
Routing
Defining Routes
• In the app-routing module, we will need to add Routes to the module
where path is the path in the URL and component is the component that the path will direct to
• Under the @NgModule decorator, we add the RouterModule to the imports array and configures the appRoutes that we have just defined:
13
Routing
Activated Routes
• An ActivatedRoute Object from the @angular/route package allows us to get URL parameters to help identify operations applied to specific data objects
• For example, we can take the parameter ‘name’ from the encoded URL using the following
14
Routing
router-outlet
• Finally, we need to use the selector
as a placeholder for routing.
• A typical application of this is to place this selector in app.component.html and let the router do the rest!
15