Skip to content

Commit 81996f8

Browse files
committed
update to reflect alpha 35 API changes
1 parent b55f3e6 commit 81996f8

File tree

1 file changed

+22
-11
lines changed

1 file changed

+22
-11
lines changed

README.md

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
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])
2230
class 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')
4048
class 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])
5361
class MyComponent {}
5462
```
5563

@@ -86,14 +94,14 @@ class MyComponent {}
8694
class MyComponent {}
8795
8896
//<div my-component></div>
89-
@Decorator(selector: '[my-component]')
97+
@Directive(selector: '[my-component]')
9098
@View(templateUrl: "my-component.html")
9199
class MyComponent {}
92100
```
93101

94102
**Inject dependencies into a component**
95103
```dart
96-
@Injectable //Needed for Angular tranformer
104+
@Injectable() //Needed for Angular transformer
97105
class 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]')
111122
class MyComponent {
112123
dom.Element element;
113124
MyComponent(ElementRef ref) {
114-
element = ref.domElement;
125+
element = ref.nativeElement;
115126
}
116127
}
117128
```

0 commit comments

Comments
 (0)