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 件のコメント:
コメントを投稿