无法让Angular Dart Router工作

时间:2014-06-07 03:20:39

标签: dart angular-dart

我在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')
});

但是,我的路由功能似乎永远不会被调用。我使用了print语句和断点都无济于事。当我试图这样称呼它时:

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

我明白了:

状态错误:路线名称无效:登录

我尝试过0.10.0,但没有骰子。我还尝试了3种新的绑定函数格式,它们似乎也没有激发路由功能。

2 个答案:

答案 0 :(得分:2)

我目前的例子也很挣扎。我最终得到了类似下面的例子。 NgRoutingUsePushState设置在0.11.0中是必需的,或者更改路线似乎不起作用,可能已修复为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();
}

答案 1 :(得分:1)

这就是我现在处理路由的方式,它也需要一段时间,但它在AngularDart 0.12.0中工作

在您的路由器文件中,您将拥有以下代码:

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')
        );
}

然后在您的模块初始化类中,您将添加以下代码:

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();
     }
 }

最后,要访问Controller中的路由器,您只需这样做:

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

    Router router;

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