Nested routing in angular dart

Question

I'm having problems of showing a nested view in angular dart. The top-level navigation works just fine, but I can't navigate inside the team-view. I know the 1.0-version just have been released, but I hope someone can give me a hint or a solution:

Here is the router (fremad_route_initializer.dart):

part of fremad;

void fremadRouteInitializer(Router router, RouteViewFactory view) {
  view.configure({
    'home': ngRoute(
      path: '/home',
      viewHtml: '<home-view></home-view>',
      defaultRoute: true
      ),
    'team': ngRoute(
      path: '/team', 
      viewHtml: '<team-view></team-view>',
      mount: {
          "fixture" : ngRoute(
             path: '/fixture',
             viewHtml: '<show-team-fixture></show-team-fixture>'
          ),
          "table" : ngRoute(
             path: '/table',
             viewHtml: '<show-team-table></show-team-table>'
          )
      }),
    'sponsors': ngRoute(
      path: '/sponsors', 
      viewHtml: '<sponsors-view></sponsors-view>'
      )
  });
}

Here is my app:

library fremad;

import 'dart:html' as html;
import 'dart:async';
import 'dart:convert';

import 'package:angular/angular.dart';
import 'package:angular/animate/module.dart';

part 'components/header_component.dart';
part 'components/main_menu_component.dart';
part 'components/footer_component.dart';

part 'components/home_view_component.dart';
part 'components/sponsors_view_component.dart';
part 'components/team_view_component.dart';

part 'components/team/fixture_view_component.dart';
part 'components/team/table_view_component.dart';

part 'fremad_route_initializer.dart';
part 'global_http_interceptors.dart';

class FremadApp extends Module {
  FremadApp(){


    bind(HeaderComponent);
    bind(MainMenuComponent);
    bind(FooterComponent);

    bind(ShowHomeComponent);
    bind(ShowSponsorsComponent);
    bind(ShowTeamComponent);

    bind(ShowTeamFixtureComponent);
    bind(ShowTeamTableComponent);

    bind(RouteInitializerFn, toValue: fremadRouteInitializer);
    bind(NgRoutingUsePushState, toValue: new NgRoutingUsePushState.value(false));

    bind(UrlRewriter, toImplementation: FremadUrlRewriter);
  }
}


@Injectable()
class FremadUrlRewriter implements UrlRewriter {
  String call(url) =>
      url.startsWith('lib/') ? 'packages/fremad/${url.substring(4)}' : url;
}

Here is index.html:

<!DOCTYPE html>

<html ng-app>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fremad</title>

<link rel="stylesheet" href="fremad.css">

</head>
<body>
  <div id="wrapper">

    <header-item></header-item>
    <main-menu></main-menu>
    <div id="wrapper-body">

      <ng-view></ng-view>

      <div class="clearfix"></div>
    </div>
    <footer-item></footer-item>
  </div>

<script async type="application/dart" src="fremad_main.dart"></script>
<script async src="packages/browser/dart.js"></script>

</body>
</html>

Team_view.html:

<nav id="team-nav">
    <ul>
        <li><a href="#/team/about">About</a></li>
        <li><a href="#/team/players">Players</a></li>
        <li><a href="#/team/fixtures">Fixtures</a></li>
        <li><a href="#/team/table">Table</a></li>
    </ul>
</nav>

<ng-view></ng-view>

In team_view_component.dart:

part of fremad;

@Component(
    selector: 'team-view',
    publishAs: 'ctrl',
    templateUrl: 'packages/fremad/components/team_view.html',
    useShadowDom: false
)
class ShowTeamComponent {
  void create() {
    html.window.console.info("Is in ShowTeamComponent");
  }
}

And in fixture_view_component.dart:

part of fremad;

@Component(
    selector: 'team-fixture-view',
    publishAs: 'ctrl',
    templateUrl: 'packages/fremad/components/team/fixture_view.html',
    useShadowDom: false
)
class ShowTeamFixtureComponent {
  void create() {
    html.window.console.info("Is in ShowTeamFixtureComponent");
  }

}

Øystein W. Øystein W. · Accepted Answer · 2014-10-16T11:19:57

Just a stupid mistake:

In fremad_route_initializer.dart I used 'show-team-fixture' and in fixture_view_component.dart I used 'team-fixture-view'. Now it's working..

Nested routing in angular dart

1 Answers