Routing in Angular is simply a set of rules that map a requested URL to a component. This tends to confuse people that are coming to Angular from another technology that has routing, especially a technology that is not an SPA (that is, a single-page application) framework. Let me explain this a bit.

Angular applications only have one page (hence, the term single-page application), as we'll see in a moment when we create our Angular application. Angular components have templates, which are standard HTML elements that are used to design the layout of the structure for presentation. And as we'll see in Chapter 6, Building Angular Components, they also have styles.

As was mentioned in the first chapter of the book, Angular applications can be thought of as trees of components. This is to say that components can contain other components, and this nesting of components can continue as much as is required for your application.

So, although components have templates (note: some web frameworks refer to web pages as templates), Angular's routing maps URL paths to components, not to web pages or templates. When the template of the component that the requested URL is rendered (and we'll see how this happens in just a moment), not only is that component's template rendered, but all nested components' templates are also rendered. The top-level component that is mapped to by Angular's router may contain other child components, which in turn can contain other child components, and so forth. This is what is meant by a tree of components.

For the most part, data in Angular applications flow from the parent components to their immediate children. It does not flow from the parent component to its grandchild component. Moreover, data does not flow upward. It is a unidirectional flow—parent to child. I say for the most part, because there are techniques and libraries that change some of this behavior—for instance, components can talk to each other through an intermediary, which we'll look at later on in the book. However, by design, and without outside intervention, data flows from parent to child.

You'll become familiar with all of this as we progress through the book. All you have to understand at this point, to understand routing, is that URLs are mapped to components instead of to pages, because Angular applications only have one page. The only page in Angular apps is the index.html page, which is in the app directory. In Chapter 6, Building Angular Components, we'll see how our default component gets loaded into the index.html page. For now, let's get back to routing.