1- ## A WIP Angular 2 cheatsheet for dart (alpha 26 )
1+ ## A WIP Angular 2 cheatsheet for dart (alpha 35 )
22
33** Bootstrap angular**
44``` dart
@@ -8,16 +8,24 @@ main() => bootstrap(MyApp); //MyApp is a component
88
99** Bootstrap angular with default router**
1010``` dart
11- import 'package:angular2/angular2.dart';
12- import 'package:angular2/router.dart';
13- main() => bootstrap(MyApp, routerInjectables);
11+ import 'package:angular2/angular2.dart' show bind;
12+ import 'package:angular2/bootstrap.dart' show bootstrap;
13+ import 'package:angular2/router.dart' show APP_BASE_HREF, HashLocationStrategy, LocationStrategy, routerInjectables;
14+
15+ main() {
16+ bootstrap(App, [
17+ routerInjectables,
18+ bind(APP_BASE_HREF).toValue('/'),
19+ // bind(LocationStrategy).toClass(HashLocationStrategy) // if you want to use #
20+ ]);
21+ }
1422```
1523
1624
1725### Components
1826
1927``` dart
20- @Component(selector: 'selector-name', appInjector : const [injectables])
28+ @Component(selector: 'selector-name', viewBindings : const [injectables])
2129@View(templateUrl: "home.html", directives: const [directives])
2230class MyComponent {}
2331```
@@ -36,7 +44,7 @@ class MyBanner {}
3644``` dart
3745//<my-banner></my-banner>
3846@Component(selector: 'my-banner')
39- @View(templateUrl: 'my-banner.html')
47+ @View(templateUrl: 'package:mypackage/ my-banner.html')
4048class MyBanner {}
4149```
4250``` html
@@ -49,7 +57,7 @@ class MyBanner {}
4957** Add Angular core directives (NgFor, NgIf, NgNonBindable, NgSwitch, NgSwitchWhen, NgSwitchDefault)**
5058``` dart
5159@Component(selector: 'my-component')
52- @View(templateUrl: "my-component.html", directives: const [coreDirectives ])
60+ @View(templateUrl: "my-component.html", directives: const [CORE_DIRECTIVES ])
5361class MyComponent {}
5462```
5563
@@ -86,14 +94,14 @@ class MyComponent {}
8694class MyComponent {}
8795
8896//<div my-component></div>
89- @Decorator (selector: '[my-component]')
97+ @Directive (selector: '[my-component]')
9098@View(templateUrl: "my-component.html")
9199class MyComponent {}
92100```
93101
94102** Inject dependencies into a component**
95103``` dart
96- @Injectable //Needed for Angular tranformer
104+ @Injectable() //Needed for Angular transformer
97105class MyService {}
98106
99107@Component(selector: 'selector-name', appInjector: const [MyService])
@@ -106,12 +114,15 @@ class MyComponent {
106114** Accesing host DOM element in a component/decorator**
107115
108116``` dart
117+ import 'dart:html' as dom;
118+ import 'package:angular2/angular2.dart' show Directive, ElementRef;
119+
109120//<div selector-name></div>
110- @Decorator (selector: '[selector-name]')
121+ @Directive (selector: '[selector-name]')
111122class MyComponent {
112123 dom.Element element;
113124 MyComponent(ElementRef ref) {
114- element = ref.domElement ;
125+ element = ref.nativeElement ;
115126 }
116127}
117128```
0 commit comments