How do I get routes to work with AngularDart?

Question

This is my code,

import 'package:angular/angular.dart';

class AppModule extends Module {

  AppModule(){
    type(AppController);
    type(LoginController);
    type(RouteInitializer, implementedBy: AppRouter);
  }

}

class AppRouter implements RouteInitializer {

  init(Router router, ViewFactory view) {
   router.root
    ..addRoute(
      name: 'login',
      path: '/login',
      enter: view('app/views/login.tpl.html'))
    ..addRoute(
       defaultRoute: true,
       name: 'index',
       enter: view('app/views/index.tpl.html'));
  }

}

@NgController(selector: '[app-ctrl]', publishAs: 'ctrl')
class AppController {

}

@NgController(selector: '[login-ctrl]', publishAs: 'ctrl')
class LoginController {

  Http _http;
  String works = 'Works.';

  LoginController(this._http);

}

No routes are working, clicking on a '#/login' link does not change the url or the view.

Log says

clicked /app/web/index.html#/login
route /app/web/index.html [Route: null]
route  [Route: index]

What am I doing wrong?

score 7 · Accepted Answer · edited Oct 08 '14 at 11:18

7

There might be a couple of problems with this code. From what I can see the most likely problem is that the routing is using pushState. When you use pushState you don't manipulate the url using a hash. For more information on that see: Manipulating Browser History

Angular will use push state when a browser supports it.

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

Giving you are module of:

class AppModule extends Module {

  AppModule(){
    bind(AppController);
    bind(LoginController);
    bind(RouteInitializer, implementedBy: AppRouter);
    bind(NgRoutingUsePushState, toValue: new NgRoutingUsePushState.value(false));
  }
}

Other possible problems include:

Not having an ng-view directive
Not setting the ng-bind-route in app/views/login.tpl.html, and app/views/index.tpl.html

When I made all these changes your code worked correctly for me when navigating to #/login

edited Oct 08 '14 at 11:18

Quentin Rufin

135
2
11

answered Nov 17 '13 at 23:56

Ted Sander

86
2

I don't understand your snippet of code. What factory and in what context are you adding that code? – Johan Alkstål Nov 18 '13 at 08:22
The factory is added to the module. It turns off using pushState for Html5 browsers. – Ted Sander Nov 18 '13 at 08:55
1

Or you can use value binding: value(NgRoutingUsePushState, new NgRoutingUsePushState.value(false)); – pavelgj Nov 18 '13 at 19:45
1

How do you set the `ng-bind-route` – 0xcaff Feb 24 '14 at 18:12
`ng-bind-route` seems to be no longer needed: http://blog.angulardart.org/2013/11/angulardart-v091.html – Scotty Waggoner Jun 26 '14 at 07:45

How do I get routes to work with AngularDart?

1 Answers1

Linked