Matches route and executes all associated injectables

The return values from the matched injectables are turned into a promise using $q.when(), and then aggregated with $q.all() and then returned by goto(). This allows handling asynchronous requests on the server.

Add event handlers to be executed whenever a new route is handled, via $routing.goto(), the window.onpopstate event or a click on a controlled link.

Sets a handler for a route. There can be multiple handlers for any route.

The route matching is handled by (the route-recognizer package, read the docs regarding the route syntax here)[https://github.com/tildeio/route-recognizer#usage]. You can capture parts of the url with :name and *name:

 $routing.set('/users/:id')
 //=> matches /users/1 to { id: 1 }

 $routing.set('/about/*path')
 //=> matches /about/location/city to { path: 'location/city' }

Captured segments of the url will be available in $context.params.

Setting a route matches an injectable with a url:

 $routing.set('/example-url', exampleInjectable);

The injectable that will receive three parameters:

• $context - information about the current route and access to url parameters
• $renderer - the renderer $routing is configured to use. Default just set the html content of the target DOM node
• $target - DOM node that the content should end up in. Useful if you don't want to use $renderer for a specific route

Set routes in a .run() block on your root module:

 mimeo.bootstrap('example', [])
     .component(['users', () => ($context, $renderer) => {
         $renderer('<ul><li>John</li><li>Alice</li</ul>');
     }])
     .component(['loginForm', () => ($context, $renderer) => {
         $renderer('<form></form>');
     }])
     .run([
         '$routing',
         'users',
         'loginForm',
         ($routing, users, loginForm) => {
             $routing.set('/users', users);
             $routing.set('/login', loginForm);
         }
     ]);

The .run() block needs to have all component-injectables you want to set as route handlers injected. .set() requires the actual injectables to be passed in, not the injectables name.

$context contains information about the current route, it has three attributes:

• $context.params will contain any matched segments from the url.
• $context.query will contain decoded query parameters as a key-value hash. Repeating keys will create an array: /example?a=1&b=2&c=3 //=> { a: [1, 2, 3] }
• $context.url represents the parsed url as a key-value store.

$context.url example for http://localhost:3000/?example-key=value:

 $context.url = {
     anchor: '',
     authority: 'localhost:3000',
     directory: '/',
     file: '',
     host: 'localhost',
     password: '',
     path: '/',
     port: '3000',
     protocol: 'http',
     query: 'example-key=value',
     relative: '/?example-key=value',
     source: 'http://localhost:3000/?example-key=value',
     user: '',
     userInfo: ''
 }

Set a default route to redirect to when the current route isn't matched to anything

Set a custom factory for render functions

Render factories receive the DOM target node for the route and produce an executable that can be used to render content (that executable is called renderer).

A new renderer is created every time a route is matched by passing the routes target DOM node to the makeRenderer function.

Renderer functions are passed to the injectable that is matched with the route. setMakeRenderer sets the factory that creates the render functions.

The default makeRenderer factory produces renderer functions that simply set innerHTML on the target DOM node:

 function(targetAsDOMNode) {
     return function(toRender) {
         targetAsDOMNode.innerHTML = toRender;
     };
 }

The injectable for any given route can use the render method like this:

 mimeo.module('example', [])
     .component(['component', () => ($context, $renderer) => {
         $renderer('<h1>Headline content</h1>');
     }]);

When using a rendering library, it's often beneficial to set a custom renderer factory to simplify rendering in the component. E.g. with React, custom components are mounted on DOM nodes via

 ReactDOM.render(<Component/>, DOMNode);

A custom setMakeRenderer for React would create a function that accepts a React component and mounts it to the routes target DOM node:

 $routing.setMakeRenderer(function(targetDOMNode) {
     return function(component) {
         ReactDOM.render(component, targetDOMNode);
     }
 });