CODEWITHSUNDEEP
dartangular-dart
JesterXL
JesterXL

Reputation: 308

Can't get Angular Dart Router to work

I've tried this syntax in AngularDart 0.11.0: Angular Dart passing data from route service into a controller

module.value(RouteInitializerFn, configureRoutes);

void configureRoutes(Router router, RouteViewFactory views)
{
    print("configureRoutes");
    views.configure({
        'login': ngRoute(
            path: '/login',
            view: 'login/login.tpl.html'),
        'today': ngRoute(
            path: '/today',
            view: '/today/today.tpl.html')
});

However, my routing function never seems to get called. I've used both a print statement and breakpoint to no avail. When I attempt to call it like so:

WorkoutLoggerApplication(this.rootScope, this.router)
{
    print("WorkoutLoggerApplication::constructor");
    new Future.delayed(new Duration(seconds: 2), ()
        {
            router.go("login", {});
        });
}

I get:

Bad state: Invalid route name: login

I've tried 0.10.0, but no dice. I've also tried 3 varieties of the new bind function format, both also don't seem to ever fire the routing function.

Upvotes: 3

Views: 871

Answers (2)

taisph
taisph

Reputation: 251

I've also struggled a lot with the current examples. I ended up with something like the example below. The NgRoutingUsePushState setting was necessary in 0.11.0 or changing routes didn't seem to work, may have been fixed on 0.12.0.

library myangular;

import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

class MyModule extends Module {
    MyModule() {
        bind(RouteInitializerFn, toValue: myRouteInitializer);
        bind(NgRoutingUsePushState, toFactory: (_) => new NgRoutingUsePushState.value(false));
    }
}

void myRouteInitializer(Router router, RouteViewFactory views) {
  views.configure({
    'foo': ngRoute(
        path: '/foo',
        view: 'view/foo.html'),
    'bar': ngRoute(
        path: '/bar',
        view: 'view/bar.html',
        defaultRoute: true),
  });
}

void main() {
    applicationFactory()
        .addModule(new MyModule())
        .run();
}

Upvotes: 2

Denis Havranek
Denis Havranek

Reputation: 61

This is the way I'm handling my routing now, it also took a while, but it's working in AngularDart 0.12.0

In your router file you'll have this code:

void configureRoutes(Router configureRoutes, RouteViewFactory view) {

    configureRoutes.root
        ..addRoute(
            name: 'login',
            path: '/login',
            enter: view('login/login.tpl.html')
        )
        ..addRoute(
            name: 'today',
            path: '/today',
            enter: view('today/today.tpl.html')
        );
}

Then in your module initialization class you'll add this code:

import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
import 'package:angular/routing/module.dart';
import 'package:logging/logging.dart';

// router config import
import 'my_router_config.dart';


class MainModule extends Module {

     MainModule() {
          this
              // bind all you need and then bind routing

              // ROUTING
              ..bind(RouteInitializerFn, toValue: configureRoutes)
              ..bind(NgRoutingUsePushState,
                    toFactory: (_) => new NgRoutingUsePushState.value(false));


     }

     void main() {
         //some logging logic and then init
         Logger.root.level = Level.FINEST;
         Logger.root.onRecord.listen((LogRecord r) { print(r.message); });
         applicationFactory()
             .addModule(new MainModule())
             .run();
     }
 }

Finally, to access the router in a Controller, you would simply do it like this:

@Controller(
        selector: '[some-controller]', 
        publishAs: 'c')
class SomeController {

    Router router;

    SomeController(this.router) {
        print(router);
    }    
}

Upvotes: 1

Related Questions