Routing to Components
Explore how to set up Angular routing to link components dynamically within a single-page app. Understand how to define routes for components like ResultsList and EditPhoto using RxJS observables, enabling responsive navigation without page reloads. This lesson guides you through refactoring components to work with Angular's router and configuring route parameters for seamless user experiences.
We'll cover the following...
Single-Page App model
Angular, like most modern frameworks, uses the Single-Page App model. That is, instead of loading a new page every time the user navigates around a site, a scaffold is built on the initial page load, and then only what’s necessary is swapped out on every navigation. This means the user can go from the photo search page to editing a photo’s tags without reloading any of the root CSS, the page header, and other common services.
router-outlet element
In your forays through the generated app.module.html, you may have noticed the <router-outlet> element. This element is used to tell Angular where the content of each page should be loaded (note that the page header is located outside the <router-outlet> ...