2017年1月24日火曜日

AngularDart の Router を使って見た。

AngularDart の Router を使って見た。
Tour of Heros を試してみて。ちょっと躓いたので、記録だけ。

Router機能で、画面を切り替えるだけのコードなら、100行もない。

https://github.com/firefirestyle/ebook_windstyle_markdown/tree/master/angular/tiny-routing

===
main.dart

import 'package:angular2/platform/browser.dart';
import 'package:angular2/core.dart';
import 'package:angular2/router.dart';
import 'package:angular2/platform/common.dart';
import 'dart:async';

void main() {
  bootstrap(AppComponent);
}

@Component(
    selector: 'my-app',
    template: '''
      <h1>{{title}}</h1>
      <nav>
        <a [routerLink]="['XXX']">XXX</a>
        <a [routerLink]="['YYY']">YYY</a>
      </nav>
      <router-outlet></router-outlet>''',
    directives: const [ROUTER_DIRECTIVES],
    providers: const [ROUTER_PROVIDERS])
@RouteConfig(const [
  const Route(
      path: '/xxxx',
      name: 'XXX',
      component: XXXComponent,
      useAsDefault: true),
  const Route(path: '/yyy', name: 'YYY', component: YYYComponent)
])
class AppComponent {
  String title = 'Tour of Heroes';
}


@Component(
  selector: 'yyyy',
  template: """<div>xxx</div> """,
  directives: const [ROUTER_DIRECTIVES],
)
class XXXComponent {
  XXXComponent();
}


@Component(
    selector: 'xxxx',
    directives: const [ROUTER_DIRECTIVES],
    template: """
    <div>yyy {{v}}</div>
    <button (click)="goBack()">Back</button>
    <button (click)="gotoDetail()">View Details</button>""")
class YYYComponent implements OnInit {
  final Router _router;
  final Location _location;
  String v="";
  YYYComponent(this._router,this._location);

  void ngOnInit() {
    v = _location.path();
  }

  void goBack() => _location.back();
  Future<Null> gotoDetail() => _router.navigate([
    'XXX'
  ]);
}
===

index..html
====

<!DOCTYPE html>
<html>
  <head>
    <!-- For testing using pub serve directly use: -->
    <base href="/">
    <title>Hello Angular</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script defer src="main.dart" type="application/dart"></script>
    <script defer src="packages/browser/dart.js"></script>
  </head>
  <body>
  <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>
====

チュートリアルには書いているのですが、
<base href="/">
を書き忘れて、躓いた。


そこだけ、注意。


0 件のコメント:

コメントを投稿