Build Reactive Websites with RxJS

Routing to Components

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.

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 ...