An Angular application is basically a tree of components. As we've learned in previous chapters, Angular is an SPA framework and thus has a single page to leverage for displaying its tree of components. We've seen that Angular has a single top-level component, called the root component, and depending on what we'd like our application to do in response to our user's actions, we have that root component load up other components. These other components (let's refer to them as secondary root components for now) in turn recursively render additional components. The way in which we've wired up our router in Chapter 4, Routing, is that we've mapped URLs to our secondary root components—one per page, which springs into view when our users click on the navigational (that is, menu) links.

What makes all this possible is that components are composable. This is to say that our components are made up of other components, and are thus nested. We can nest our components in an arbitrarily deep component hierarchy, hence the statement at the very beginning of this section, An Angular application is basically a tree of components.

The Angular framework takes care of recursively loading and rendering our components for us.