如何获得使用AngularDart的路由?

时间:2013-11-17 12:13:46

标签: dart angular-dart

这是我的代码,

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

}

没有路由正常,单击“#/ login”链接不会更改网址或视图。

日志说

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

我做错了什么?

1 个答案:

答案 0 :(得分:7)

此代码可能存在一些问题。从我可以看到的最可能的问题是路由使用pushState。使用pushState时,不要使用散列操作url。有关详细信息,请参阅: Manipulating Browser History

当浏览器支持推送状态时,Angular将使用推送状态。

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

给你以下的模块:

class AppModule extends Module {

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

其他可能的问题包括:

  • 没有ng-view指令
  • 未在app / views / login.tpl.html和app / views / index.tpl.html
  • 中设置ng-bind-route

当我进行所有这些更改时,您的代码在导航到#/ login

时正常工作