Module¶

For the reference see: Module

A Module is the main control unit for several components, which for example will all access a shared service defined in the module.

A Module can host Submodules which will be either specified through Modules or inside the routes directive with load_children.

The module is responsible for instantiating the one-and-only router instance, which controls the navigation between components.

Properties of a Module¶

Attributes and other defininitions, like services in the Module can be accessed by:

Submodules (and components of it)

Components (and subcomponents of it) created by the module or during routing

It can declare:

bindings: which auto-generates an attribute bound to an Observable

services: which will be added as attributes and instantiated to provide a service to components and submodules

modules: which will be instantiated as submodules. Submodules don’t, for example, host a router instance

components: which will be bootstrapped during initialization (before the routing engine takes over, if routes are defined)

routes: which define the navigation hierarchy

selector (default: None)

The default behavior of a module controlling an application is that things are plotted in the body of the html document. Where exactly is decided by the rendering engine (i.e.: the browser in most cases).

If finer control is wished, one can

Insert a <module-outlet></module-outlet> tag in the html document and the module will use the tag as the root node for components to be rendered to.

Specify a different name in the module definition with for example selector = 'my-module-tag' and later have this as a tag in the html document as in: <my-module-tag></my-module-tag>. Everything will be rendered under this tag.

An Empty Module¶

With no definitions it would simply look like this after having inherited from Module and if we looked into the contents of each of the directives.

from anpylar import Module

class MyModule(Module):
    bindings = {}
    services = {}
    modules = []
    components = []  # can be a single item or an iterable
    routes = []

A more standard look for a real application could look like this.

from anpylar import Module

from .app_component import AppComponet
from .one_component import OneComponent
from .two_component import TwoComponent
from .the_service import TheService

class MyModule(Module):
    bindings = {}
    services = {'the_service': TheService}
    modules = []
    components = AppComponent  # can be a single item or an iterable
    routes = [
        {'path': 'one', 'component': OneComponent,},
        {'path': 'two', 'component': TwoComponent,},
    ]

This defines a Module that:

Creates a service from TheService and makes it reachable as an attribute under the name the_service

Bootstraps the component AppComponent before the routing engine takes over

Instantiates the routing engine with two routes: http://baseurl/one and http://baseurl/two for which components OneComponent and TwoComponent will be respectively instantiated