Routing

Router in action!

• In order to navigate in our application we will use router, let see how router works

the Router module

• is in its own package: @angular/router
• is configured with RouterModule.forRoot(routeConfig) or RouterModule.forChild(routeConfig)
• expects a Route[] as param for the config
• a Route has properties, such as path and component - for a specific path a component will be loaded

a simple example of a configuration

                    
                        const routeConfig: Routes = [
                          { path: 'pizze', component: PizzeComponent },
                          { path: 'order/:id', component: OrderComponent },
                          { path: '', redirectTo: 'pizze',
                                pathMatch: 'full'},
                          { path: '**', component: NotFoundComponent }
                        ];

                        @NgModule({
                          imports: [
                            RouterModule.forRoot(routeConfig)
                          ]
                        })
                        export class AppModule { }
                    
                

Router Links directive

• RouterLink is a directive for navigating to a different route
• when the user clicks on element which has routerLink, navigation should kick in and change URL in browser
• the routerLink directive needs a binding relative to the root of the app's url

                    
                        <nav>
                            <ul>
                                <li><a routerLink="/pizze">Pizze</a></li>
                                <li><a routerLink="/order">Orders</a></li>
                            </ul>
                        </nav>
                    
                

Router Outlet - the place where the component is going to be displayed

• the component is displayed where <router-outlet></router-outlet> is located
• router-outlet is a directive from the router module

                    
                        <h1>Welcome</h1>
                        <navigation-bar></navigation-bar>
                        <router-outlet></router-outlet>
                    
                

Router basic workflow

routerLink -> updates URL -> router sees changes -> sequentially check routerConfig -> selects the first match path -> load component defined for that path -> find <router-outlet></router-outlet> directive -> display component

Route params

• required
• optional
• query param

                    
                        
                        this.route.navigate(['employee',id])
                        
                        this.route.navigate(['employee',{name:'ab'}]));
                        
                        this.route.navigate(['employee'],{queryParams:{name:'a'}})
                    
                

Task 10.1 - Routing

• Base branch: 09_ServicesHTTP_3_solution
• create a new home component that displays the pizzeria image from the assets folder
• add a button to the home component which will redirect us to order view
• create a config for the router, it should contain the home and order paths
• if the path is empty, the app should navigate to the home component
• add navigation items to AppComponent with these two paths
• Hint: For displaying navigation you should use Navbar component

Task 10.1 - Possible Solution

• Branch: 10_Routing_1_solution
• if you want to throw your local changes away and you want to see the solution: git reset --hard && git checkout 10_Routing_1_solution

Task 10.2 - History

• Base branch: 10_Routing_1_solution
• this task is a repetition of already covered concepts
• build a new page for order history, like the one for pizzeria
• you can get the data from the https://pizza-data-api-test.apps.caast01.balgroupit.com/history Endpoint
• Inside the History component add HistoryList component and display order history with properties(see: Order interface)
• it should be possible to navigate to the history page

Task 10.2 - Possible Solution

• Branch: 10_Routing_2_solution
• if you want to throw your local changes away and you want to see the solution: git reset --hard && git checkout 10_Routing_2_solution