https://github.com/andresaraujo/angular2_cheatsheet_dart
https://github.com/andresaraujo/angular2_cheatsheet_dart
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/andresaraujo/angular2_cheatsheet_dart
- Owner: andresaraujo
- Created: 2015-05-21T22:19:00.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-09-05T15:58:31.000Z (over 10 years ago)
- Last Synced: 2025-01-18T22:58:31.243Z (11 months ago)
- Size: 152 KB
- Stars: 11
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- angular-awesome-list - Еще один cheatsheet для AngularDart
README
## A WIP Angular 2 cheatsheet for dart (alpha 36)
**Bootstrap angular**
```dart
import 'package:angular2/bootstrap.dart' show bootstrap;
main() => bootstrap(MyApp); //MyApp is a component
```
**Bootstrap angular with default router**
```dart
import 'package:angular2/angular2.dart' show bind;
import 'package:angular2/bootstrap.dart' show bootstrap;
import 'package:angular2/router.dart' show APP_BASE_HREF, HashLocationStrategy, LocationStrategy, ROUTER_BINDINGS;
main() {
bootstrap(App, [
ROUTER_BINDINGS,
bind(APP_BASE_HREF).toValue('/'),
// bind(LocationStrategy).toClass(HashLocationStrategy) // if you want to use #
]);
}
```
### Components
```dart
@Component(selector: 'selector-name', viewBindings: const [injectables])
@View(templateUrl: "home.html", directives: const [directives])
class MyComponent {}
```
#### @View
**template**: replace the current element with the contents of the
HTML string.
```dart
//
@Component(selector: 'my-banner')
@View(template: '
')
class MyBanner {}
```
**templateUrl**: replace the current element with the contents loaded by the specified URL
```dart
//
@Component(selector: 'my-banner')
@View(templateUrl: 'package:mypackage/my-banner.html')
class MyBanner {}
```
```html
```
**directives**: Specifies a list of directives that can be used within a template. *Its optional*
**Add Angular core directives (NgFor, NgIf, NgNonBindable, NgSwitch, NgSwitchWhen, NgSwitchDefault)**
```dart
@Component(selector: 'my-component')
@View(templateUrl: "my-component.html", directives: const [CORE_DIRECTIVES])
class MyComponent {}
```
**Add directives/components to be used in the template**
```dart
@Directive(selector: '[opacity]')
class Opacity {/* ... */}
@Component(selector: '[item]')
@View(templateUrl: "item.html")
class Item {/* ... */}
@Component(selector: 'my-component')
@View(templateUrl: "my-component.html", directives: const [Opacity, Item])
class MyComponent {}
```
#### @Component
**selector**: The CSS selector that triggers the instantiation of a directive.
- `element-name`: select by element name.
- `.class`: select by class name.
- `[attribute]`: select by attribute name.
- `[attribute=value]`: select by attribute name and value.
- `:not(sub_selector)`: select only if the element does not match the `sub_selector`.
- `selector1, selector2`: select if either `selector1` or `selector2` matches.
**Selector example**
```dart
//
@Component(selector: 'my-component')
@View(templateUrl: "my-component.html")
class MyComponent {}
//
@Directive(selector: '[my-component]')
@View(templateUrl: "my-component.html")
class MyComponent {}
```
**Inject dependencies into a component**
```dart
@Injectable() //Needed for Angular transformer
class MyService {}
@Component(selector: 'selector-name', appInjector: const [MyService])
class MyComponent {
MyService service;
MyComponent(this.service);
}
```
**Accesing host DOM element in a component/decorator**
```dart
import 'dart:html' as dom;
import 'package:angular2/angular2.dart' show Directive, ElementRef;
//
@Directive(selector: '[selector-name]')
class MyComponent {
dom.Element element;
MyComponent(ElementRef ref) {
element = ref.nativeElement;
}
}
```
**properties**: The `properties` property defines a set of `directiveProperty` to `bindingProperty` key-value pairs. *Its optional*
- `directiveProperty` specifies the component property where the value is written.
- `bindingProperty` specifies the DOM property where the value is read from.
**Example of properties**
```dart
//
@Component(
selector: 'my-component',
properties: const [
'name: my-name',// -> set name(name)
'desc: my-desc'
])
@View(templateUrl: "my-component.html")
class MyComponent {
String _name;
int desc;
set name(name) => _name;
}
```