Angular - Router tutorial tour of heroes-pages-3
.pdf
School
Northeastern University**We aren't endorsed by this school
Course
INFO 6255
Subject
Computer Science
Date
Dec 22, 2024
Pages
6
Uploaded by UltraLapwingPerson47
4/10/24, 11:43 AMAngular - Router tutorial: tour of heroeshttps://angular.io/guide/router-tutorial-toh13/137Adding the con±gured to the issu²cient for minimal route con±gurations. However, as theapplication grows, refactor the routing con±guration into aseparate ±le and create a Routing Module. A routing module is aspecial type of dedicated to routing.Registering the in the array makes the service available everywhere in the application.Add the Router OutletThe root is the application shell. It has a title, a navigationbar with two links, and a router outlet where the router renderscomponents.The router outlet serves as a placeholder where the routed componentsare rendered.The corresponding component template looks like this:Skip to main content
4/10/24, 11:43 AMAngular - Router tutorial: tour of heroeshttps://angular.io/guide/router-tutorial-toh14/137src/app/app.component.htmlDe±ne a Wildcard routeYou've created two routes in the application so far, one to and the other to . Any other URL causes the router tothrow an error and crash the app.Add a wildcard route to intercept invalid URLs and handle them gracefully.A wildcard route has a path consisting of two asterisks. It matches everyURL. Thus, the router selects this wildcard route if it can't match a routeearlier in the con±guration. A wildcard route can navigate to a custom "404Not Found" component or redirect to an existing route.The router selects the route with a first match winsstrategy.Because a wildcard route is the least speci±c route, place it lastin the route con±guration.To test this feature, add a button with a to thetemplate and set the link to a non-existent routeSkip to main content
4/10/24, 11:43 AMAngular - Router tutorial: tour of heroeshttps://angular.io/guide/router-tutorial-toh15/137called .src/app/hero-list/hero-list.component.html (excerpt)The application fails if the user clicks that button because you haven'tde±ned a route yet.Instead of adding the route, de±ne a route andhave it navigate to a .Skip to main content
4/10/24, 11:43 AMAngular - Router tutorial: tour of heroeshttps://angular.io/guide/router-tutorial-toh16/137src/app/app.module.ts (wildcard)Create the to display when users visit invalidURLs.src/app/page-not-found.component.html (404 component)Skip to main content
4/10/24, 11:43 AMAngular - Router tutorial: tour of heroeshttps://angular.io/guide/router-tutorial-toh17/137Now when the user visits , or any other invalid URL, thebrowser displays "Page not found". The browser address bar continues topoint to the invalid URL.Set up redirectsWhen the application launches, the initial URL in the browser bar is bydefault:That doesn't match any of the hard-coded routes which means the routerfalls through to the wildcard route and displays the.The application needs a default route to a valid page. The default page forthis application is the list of heroes. The application should navigate thereas if the user clicked the "Heroes" link or pastedinto the address bar.Add a route that translates the initial relative URL () to thedefault path () you want.Add the default route somewhere abovethe wildcard route. It's just abovethe wildcard route in the following excerpt showing the completefor this milestone.Skip to main content
4/10/24, 11:43 AMAngular - Router tutorial: tour of heroeshttps://angular.io/guide/router-tutorial-toh18/137src/app/app-routing.module.ts (appRoutes)The browser address bar shows as if you'd navigated theredirectly.A redirect route requires a property to tell the router how tomatch a URL to the path of a route. In this app, the router should select theroute to the only when the entire URLmatches ,so set the value to .SPOTLIGHT ON PATHMATCHTechnically, results in a route hit when the remaining,unmatched segments of the URL match . In this example, the redirect isin a top level route so the remainingURL and the entireURL are the samething.The other possible value is which tells the router tomatch the redirect route when the remaining URL begins with the redirectroute's pre±x path. This doesn't apply to this sample application because ifthe value were , every URL would match .Skip to main content