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

{title}

.. code-tab:: python app_component.py from anpylar import Component, html class AppComponent(Component): title = 'Tour of Pyroes' bindings = { 'pyroes': [], } def __init__(self): self.pyro_service.get_pyroes().subscribe(self.pyroes_) The ``AppComponent`` -------------------- Our ``AppComponent`` has already undergone several changes. The html content has: - A ``