Nested routes in Angular Dart

Question

I have a routing scheme where #/articles leads to the articles.html view, and #/articles/featured leads to featured.html. I'm not sure how to declare this nested writing, though. If I configure my routes as follows, both #/articles and #/articles/featured leads to articles.html (since both paths match r'^articles').

library my_router;

import 'package:angular/angular.dart';

class MyRouteInitializer implements RouteInitializer {
  init(Router router, ViewFactory view) {
    router.root
      ..addRoute(
          name: 'articles',
          path: '/articles',
          enter: view('views/articles.html'),
          mount: (Route route) => route
            ..addRoute(
                name: 'featured',
                path: '/featured',
                enter: view('views/featured.html'))

      );
  }
}

If I omit the enter: view('views/articles.html') line, the #/articles/featured route correctly routes to featured.html, but then nothing routes to articles.html.

Answer 1

When you define nested views it's expected that they will be rendered by nested ng-views, but it doesn't seem like what you really want. Your workaround by using a flat structure may be OK. Alternatively you could do something like this:

class MyRouteInitializer implements RouteInitializer {
  init(Router router, ViewFactory view) {
    router.root
      ..addRoute(
          name: 'articles',
          path: '/articles',
          mount: (Route route) => route
            ..addRoute(
                name: 'all',
                path: '/all',
                default: true,
                enter: view('views/articles.html')
            ..addRoute(
                name: 'featured',
                path: '/featured',
                enter: view('views/featured.html'))
      );
  }
}

Answer 2

I can get this to work by avoiding mount and defining the routes from specific to general, but the solution seems clunky and error prone. The correct way is to use mount and to properly nest the routes, but I cannot get that to work. Meanwhile, here is a temporary solution:

import 'package:angular/angular.dart';

class MyRouteInitializer implements RouteInitializer {
  init(Router router, ViewFactory view) {
    router.root
      ..addRoute(
          name: 'featured',
          path: '/articles/featured',
          enter: view('views/featured.html'))
      ..addRoute(
          name: 'articles',
          path: '/articles',
          enter: view('views/articles.html'));
  }
}