AngularDart View is not properly routing

Question

I'm new to Dart and I'm having some issues with my Views/Router.

The router in lib/routing/booking_service_router.dart:

void bookingServiceRouteInitializer(Router router, RouteViewFactory views) {

  views.configure({
    'reservations': ngRoute(
            path: '/reservations',
            view: 'view/homeReservation.html')
  });
}

The main module bookingservice.dart:

class BookingServiceModule extends Module { 

  BookingServiceModule() {
    bind(ReservationHome);
    bind(TabMenu);
    bind(RouteInitializerFn, toValue: bookingServiceRouteInitializer);
    bind(NgRoutingUsePushState, toValue: new NgRoutingUsePushState.value(false));
  }
}

void main() {
  Logger.root.level = Level.FINEST;
  Logger.root.onRecord.listen((LogRecord r) { print(r.message); });
  applicationFactory().addModule(new BookingServiceModule()).run();
}

The main html bookingservice.html:

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BookingService</title>
    <link rel="stylesheet" href="bookingservice.css">
  </head>
  <body>

  <tab-menu ng-cloak></tab-menu> 

  <div>
    <section>
      <ng-view></ng-view>
    </section>  
  </div>

  <script type="application/dart" src="bookingservice.dart"></script>
  <script type="text/javascript" src="packages/browser/dart.js"></script>

  </body>
</html>

and /lib/component/tab_menu.html:

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

<div>  
  <ul>
    <li>
      <a href="#/reservations">click this</a>
    </li>
  </ul>
</div>

and finally the view I am trying to route to web/view/homeReservation.html:

<div>
  <h1>Hello!</h1>
</div>

When I click the link to route to the homeReservation.html I need it to route to the url path: http://127.0.0.1:3030/BookingService/web/bookingservice.html#/reservations

However, the url it actually routes to is: http://127.0.0.1:3030/BookingService/web/BookingService/packages/BookingService/component/tab_menu.html#/reservations

Which basically takes it back to the same view and not showing my homeReservation.html.

Any pointers/tips/advice on what I may be missing?

Thanks!

Looks similar to github.com/angular/angular.dart/issues/1599 which seems to be fixed but not published. You could try to add a dependency to the git repo instead the hosted package. — Günter Zöchbauer
is bookingservice.html your index? If so.... where is ng-app? — Alex Haslam

user7702 user7702 · Accepted Answer · 2015-03-19T16:52:37

I got it working by changing the name of my index from bookingservice.html to index.html. Not sure exactly why I need to have an index.html for it to work properly. If anyone has a reason behind this please feel free to comment below. I'll do some more digging on the reason.

AngularDart View is not properly routing

1 Answers