https://github.com/mikemitterer/m4d_router

Router-Package for Material4Dart apps
https://github.com/mikemitterer/m4d_router

Last synced: about 1 year ago
JSON representation

Router-Package for Material4Dart apps

• Host: GitHub
• URL: https://github.com/mikemitterer/m4d_router
• Owner: MikeMitterer
• License: other
• Created: 2018-06-25T09:25:02.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2019-01-17T14:58:23.000Z (over 7 years ago)
• Last Synced: 2025-07-16T06:44:34.319Z (about 1 year ago)
• Language: Dart
• Homepage: https://www.mikemitterer.at/2018/06/29/router-library-fuer-material4dart/
• Size: 2.31 MB
• Stars: 7
• Watchers: 1
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Material4Dart router

m4d_router is a client routing library for Dart. It helps make building

single-page web apps and using `HttpServer` easier.



    



## Installation

Add this package to your pubspec.yaml file:

    dependencies:

      m4d_router: any

Then, run `pub get` to download and link in the package.

## Example

Live: [m4d_router.example.mikemitterer.at](http://m4d_router.example.mikemitterer.at/)  

Source on [GitHub](https://github.com/MikeMitterer/m4d_router/tree/route_version/example/browser)

```dart

void main() {

    final router = new Router();

    configLogging(show: Level.INFO);

    _configRouter(router);

    dom.querySelector('#output').text = 'Your Dart app is running.';

}

void _configRouter(final Router router ) {

    router

        ..addRoute(name: "Test I", path: new UrlPattern('/#/test'),

            enter: (final RouteEnterEvent event) {

                _log(event.route.title);

                _logger.info("Path: ${event.path} Params: ${event.params.join(",")}");

                _showImage("https://upload.wikimedia.org/wikipedia/commons/1/11/Test-Logo.svg");

            })

        ..addRoute(name: 'Cats', path: new ReactPattern('/cats'),

            enter: (final RouteEnterEvent event) {

                _log(event.route.title);

                _logger.info("Path: ${event.path} Params: ${event.params.join(",")}");

                _showImage("https://i1.wp.com/www.oxygen.ie/wp-content/uploads/2016/11/main_1500.jpg?resize=750%2C400");

            })

        ..addRoute(name: 'Specific cat', path: new ReactPattern(r'/cats/(\w+)'),

            enter: (final RouteEnterEvent event) {

                _log("${event.route.title}: ${event.params.join(",")}");

                _logger.info("Path: ${event.path} Params: ${event.params.join(",")}");

                if(event.params.first.toLowerCase() == "grumpy") {

                    _showImage("https://pbs.twimg.com/media/CsW0pmxUsAAuvEN.jpg");

                } else {

                    _showImage("https://catzone-tcwebsites.netdna-ssl.com/wp-content/uploads/2014/09/453768-cats-cute.jpg");

                }

            })

        ..addRoute(name: "Google for cats", path: new ReactPattern('/google'),

            enter: (final RouteEnterEvent event) {

                _log(event.route.title);

                _logger.info("Path: ${event.path} Params: ${event.params.join(",")}");

                _showImage("https://upload.wikimedia.org/wikipedia/commons/a/a5/Google_Chrome_icon_%28September_2014%29.svg");

            })

    ;

    // optional

    router.onEnter.listen((final RouteEnterEvent event) {

        _logger.info("RoutEvent ${event.route.title} -> ${event.route.urlPattern.pattern}");

    });

    // optional

    router.onError.listen((final RouteErrorEvent event) {

        _logger.info("RouteErrorEvent ${event.exception}");

    });

    router.listen(); // Start listening

}

void _log(final String logMessage) {

    final logElement = dom.querySelector("#log") as dom.UListElement;

    logElement.append(new dom.LIElement()..text = logMessage);

}

void _showImage(final String url) {

    final img = dom.querySelector("img") as dom.ImageElement;

    img.src = url;

}

```

### UrlPattern

Route is built around `UrlPattern` a class that matches, parses and produces

URLs. A `UrlPattern` is similar to a regex, but constrained so that it is

_reversible_, given a `UrlPattern` and a set of arguments you can produce the

URL that when parsed returns those same arguments. This is important for keeping

the URL space for your app flexible so that you can change a URL for a resource

in one place and keep your app working.

Route lets you use the same URL patterns for client-side and server-side

routing. Just define a library containing all your URLs.

As an example, consider a blog with a home page and an article page. The article

URL has the form /article/1234. We want to show articles without reloading the

page.

## Routing

On the browser, there is a `Router` class that associates `UrlPattern`s

to handlers. Given a URL, the router finds a pattern that matches, and invokes

its handler. The handlers

are then responsible for rendering the appropriate changes to the page.