Routing to Components

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>). Angular comes with a built-in router powered by Rx to handle all of our page transitions.

In this lesson, we’ll refactor the existing components to use routing and then build out routes for several new components. To start, we need to remove the results list component from app.component.html, which should now look like this: