angel-dart-archive/route

moved to angel-dart/angel/packages/route

angel_route

A powerful, isomorphic routing library for Dart.

This API is a huge improvement over the original Angel routing system, and thus deserves to be its own individual project.

angel_route exposes a routing system that takes the shape of a tree. This tree structure can be easily navigated, in a fashion somewhat similar to a filesystem. The Router API is a very straightforward interface that allows for your code to take a shape similar to the route tree. Users of Laravel and Express will be very happy.

angel_route does not require the use of Angel, and has minimal dependencies. Thus, it can be used in any application, regardless of framework. This includes Web apps, Flutter apps, CLI apps, and smaller servers which do not need all the features of the Angel framework.

Contents

• Examples
  • Routing
  • Tree Hierarchy and Path Resolution
• In the Browser
• Route State
• Route Parameters

Examples

Routing

If you use Angel, every Angel instance is a Router in itself.

main() {
  final router = Router();
  
  router.get('/users', () {});
  
  router.post('/users/:id/timeline', (String id) {});
  
  router.get('/square_root/:id([0-9]+)', (n) { 
    return { 'result': pow(int.parse(n), 0.5) };
  });
  
  // You can also have parameters auto-parsed.
  //
  // Supports int, double, and num.
  router.get('/square_root/int:id([0-9]+)', (int n) { 
      return { 'result': pow(n, 0.5) };
    });
  
  router.group('/show/:id', (router) {
    router.get('/reviews', (id) {
      return someQuery(id).reviews;
    });
    
    // Optionally restrict params to a RegExp
    router.get('/reviews/:reviewId([A-Za-z0-9_]+)', (id, reviewId) {
      return someQuery(id).reviews.firstWhere(
        (r) => r.id == reviewId);
    });
  }, middleware: [put, middleware, here]);

  // Grouping can also take async callbacks.
  await router.groupAsync('/hello', (router) async {
    var name = await getNameFromFileSystem();
    router.get(name, (req, res) => '...');
  });
}

The default Router does not give any notification of routes being changed, because there is no inherent stream of URL's for it to listen to. This is good, because a server needs a lot of flexibility with which to handle requests.

Hierarchy

main() {
  final router = Router();
  
  router
    .chain('middleware1')
    .chain('other_middleware')
    .get('/hello', () {
      print('world');
    });
  
  router.group('/user/:id', (router) {
    router.get('/balance', (id) async {
      final user = await someQuery(id);
      return user.balance;
    });
  });
}

See the tests for good examples.

In the Browser

Supports both hashed routes and pushState. The BrowserRouter interface exposes a Stream<RoutingResult> onRoute, which can be listened to for changes. It will fire null whenever no route is matched.

angel_route will also automatically intercept <a> elements and redirect them to your routes.

To prevent this for a given anchor, do any of the following:

• Do not provide an href
• Provide a download or target attribute on the element
• Set rel="external"

Route State

main() {
  final router = BrowserRouter();
  // ..
  router.onRoute.listen((route) {
    if (route == null)
      throw 404;
    else route.state['foo'] = 'bar';
  });

  router.listen(); // Start listening
}

For applications where you need to access a chain of handlers, consider using onResolve instead. You can see an example in web/shared/basic.dart.

Route Parameters

Routes can have parameters, as seen in the above examples. Use allParams in a RoutingResult to get them as a nice Map:

var router = Router();
router.get('/book/:id/authors', () => ...);

var result = router.resolve('/book/foo/authors');
var params = result.allParams; // {'id': 'foo'};

route's Issues

Fix browser routing

Add a chain all helper

BrowserRouter should throw a StateError on re-listen

_printDebug leaks a bit

Now resolving GET "/google", absolute: auth/google
Path segments: [google]
Could not resolve path "/google".

Make Route and Router generic

Segments

Would fix a lot

/user/:id should build two routes, not one :)

ParsedParameterSegment should set default regex

*This issue was automatically moved to: angel-dart/angel#167.

Add parents again

So then you could have navigation with relative paths too

Flutter Web

Does this support Flutter Web or just any web app ? Not clear from readme

Some working example dart-lang

It's possibile see any explicit example with 2 button that change route in website?
How angel-dart call HTML when click on specific button.
Thanks Sorry for the issue

Allow fallback routes in browser

Documentation on auto-parsing parameters

/foo/i:id/bar will auto-parse an integer; this should be documented.

Deprecate `registerMiddleware`

Route params should be URI-decoded

Can't resolve / if mounted to /

Think Spectra...

BrowserRouter again

Now it (should) actually work

Groups and mount

Group needs to call mount, and mount needs to modify matchers, otherwise params are not parsed

Docs for RoutingResult and MiddlewarePipeline

group doesn't mount router

Add support for int-parsed params, etc.

router.get('/number/int:a', ...);

Make flatten work

Compatibility with strong mode

BrowserRouter should resolve as soon as listen is called

Otherwise I have to use this hack:

final oldHash = window.location.hash;
  window.location.hash = '';
  window.location.hash = oldHash;

  if (window.location.hash.isEmpty) window.location.hash = '#/';

Improve Router `resolve`

Honestly might just give Router private access to Route

Parameters should support extra text wrapped around

I always get 'Cannot resolve route for link param...'

Hi, my config looks like this:

main() {
    ...
    final router = new BrowserRouter(hash: true);
    _configRouter(router);
   ...
}

void _configRouter(final BrowserRouter router ) {
    configLogging(show: Level.INFO);
    
    final Logger _logger = new Logger('main.configRouter');

    router.onResolve.listen((result) {
        final route = result?.route;
        if (route == null) {
            _logger.shout('No Active Route');
        } else {
            _logger.shout('Active Route: ${route.name ?? route.path}');
        }
    });
    
    router.get("/test", () {
        print("/Test.html");
        
        _logger.info("/Test.html");
    });

    router.get("test", () {
        print("Test.html");

        _logger.info("Test.html");
    });

    router.get("/#/test2", () {
        _logger.info("Test2.html");
    });

    router..dumpTree()..listen(); // Start listening
}

My links

<a href="/test">Test</a> | <a href="/#/test2">Test II</a>

But I geht either Cannot resolve route for link param "test" for the first link or Cannot resolve route for link param "#" for the second link

Any ideas?

Add mountAsync, groupAsync

These will do the same as their sync equivalents, but allow for a callback that returns FutureOr<void>.

More tests

Feature optional params

Add `chain`

Worked well in Nero