m4d_router is a client routing library for Dart. It helps make building
single-page web apps and using HttpServer
easier.
Add this package to your pubspec.yaml file:
dependencies:
m4d_router: any
Then, run pub get
to download and link in the package.
Live: m4d_router.example.mikemitterer.at
Source - check it out on GitHub
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;
}
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.
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.
A browser routing library for Dart
This CHANGELOG.md was generated with Changelog for Dart
Add this to your package's pubspec.yaml file:
dependencies:
m4d_router: ^0.2.5
You can install packages from the command line:
with pub:
$ pub get
Alternatively, your editor might support pub get
.
Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:m4d_router/browser.dart';
import 'package:m4d_router/exceptions.dart';
import 'package:m4d_router/exeptions/RouteNotFoundException.dart';
import 'package:m4d_router/route.dart';
import 'package:m4d_router/router.dart';
import 'package:m4d_router/url_pattern.dart';
import 'package:m4d_router/utils/async_utils.dart';
import 'package:m4d_router/utils/map_utils.dart';
Version | Uploaded | Documentation | Archive |
---|---|---|---|
0.2.18 | Nov 21, 2018 |
|
|
0.2.14 | Sep 19, 2018 |
|
|
0.2.5 | Jun 29, 2018 |
|
|
0.2.0 | Jun 27, 2018 |
|
|
0.1.10 | Jun 26, 2018 |
|
|
0.1.6 | Jun 25, 2018 |
|
|
0.1.2 | Jun 25, 2018 |
|
|
Popularity:
Describes how popular the package is relative to other packages.
[more]
|
30
|
Health:
Code health derived from static analysis.
[more]
|
--
|
Maintenance:
Reflects how tidy and up-to-date the package is.
[more]
|
--
|
Overall:
Weighted score of the above.
[more]
|
15
|
The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.
Support Dart 2 in pubspec.yaml
.
The SDK constraint in pubspec.yaml
doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://www.dartlang.org/dart-2#migration.
Make sure dartdoc
successfully runs on your package's source files. (-10 points)
Running dartdoc
failed with the following output:
Package | Constraint | Resolved | Available |
---|---|---|---|
Direct dependencies | |||
Dart SDK | >=1.8.0 <2.0.0 |