Part 5 - Navigation ******************* Our *Pyroes* on Tour have already achieved a lot, but there is a drawback: *we have a static set of components*. Even if we can dynamically show components, change classes and we could even think of re-rendering a component to be something different, the reality is that we are constrained to the layout we have pre-defined. In order to overcome this limitation, we need to use **routing**. The concept is easy: - The route (i.e.: the url) will define which components will render on-screen - A *route-outlet* will indicate where the rendering has to happen Copy the ``top4`` folder to ``top5`` and enter it. For example, with:: cp -r top4 top5 cd top5 .. note:: Under *Windows* and unless you have a proper shell installed (*Cygwin*, *MSYS*, *GitBash*, ...) you are probably better off using the *Windows Explorer* to make a copy of the directory) For the concept there will be: - A navigation bar in our application (``AppComponent``) - A ``DashboardComponent`` which will be, so to say, the landing page after our application has been instantiated And the known components - Our ``PyroesComponent`` which displays the list of *Pyroes* - Our ``PyroDetailComponent`` which allows us to edit the name of a *Pyro*. Because this is already a separate component, it can also be served in a different route. Our final layout will look like this The project layout now .. tabs:: .. code-tab:: bash Layout ├── app │ ├── dashboard │ │ ├── __init__.py │ │ ├── dashboard_component.css │ │ ├── dashboard_component.html │ │ └── dashboard_component.py │ ├── pyro_detail │ │ ├── __init__.py │ │ ├── pyro_detail_component.css │ │ ├── pyro_detail_component.html │ │ └── pyro_detail_component.py │ ├── pyroes │ │ ├── __init__.py │ │ ├── pyroes_component.css │ │ ├── pyroes_component.html │ │ └── pyroes_component.py │ ├── __init__.py │ ├── app_component.css │ ├── app_component.html │ ├── app_component.py │ ├── app_module.py │ ├── app_routing.py │ ├── mock_pyroes.py │ ├── pyro.py │ └── pyro_service.py ├── anpylar.js ├── index.html ├── package.json └── styles.css Notice that we will be adding: - A ``dashboard`` directory for the ``DashboardComponent`` - An ``app_routing.py`` module holding the definition of the routes Before we define the routes, let's define (or re-define) the different components. Let's start with the ``AppComponent`` .. tabs:: .. code-tab:: html app_component.html