└── README.md


/README.md:
--------------------------------------------------------------------------------
  1 | ## A WIP Angular 2 cheatsheet for dart (alpha 36)
  2 | 
  3 | **Bootstrap angular**
  4 | ```dart
  5 | import 'package:angular2/bootstrap.dart' show bootstrap;
  6 | main() => bootstrap(MyApp); //MyApp is a component
  7 | ```
  8 | 
  9 | **Bootstrap angular with default router**
 10 | ```dart
 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, ROUTER_BINDINGS;
 14 | 
 15 | main() {
 16 |   bootstrap(App, [
 17 |     ROUTER_BINDINGS,
 18 |     bind(APP_BASE_HREF).toValue('/'),
 19 |     // bind(LocationStrategy).toClass(HashLocationStrategy) // if you want to use #
 20 |   ]);
 21 | }
 22 | ```
 23 | 
 24 | 
 25 | ### Components
 26 | 
 27 | ```dart
 28 | @Component(selector: 'selector-name', viewBindings: const [injectables])
 29 | @View(templateUrl: "home.html", directives: const [directives])
 30 | class MyComponent {}
 31 | ```
 32 | #### @View
 33 | 
 34 | **template**: replace the current element with the contents of the
 35 | HTML string.
 36 | ```dart
 37 | //<my-banner></my-banner>
 38 | @Component(selector: 'my-banner')
 39 | @View(template: '<div class="banner">...</div>')
 40 | class MyBanner {}
 41 | ```
 42 | 
 43 | **templateUrl**: replace the current element with the contents loaded by the specified URL
 44 | ```dart
 45 | //<my-banner></my-banner>
 46 | @Component(selector: 'my-banner')
 47 | @View(templateUrl: 'package:mypackage/my-banner.html')
 48 | class MyBanner {}
 49 | ```
 50 | ```html
 51 | <!-- my-banner.html -->
 52 | <div class="banner">...</div>
 53 | ```
 54 | 
 55 | **directives**: Specifies a list of directives that can be used within a template. *Its optional*
 56 | 
 57 | **Add Angular core directives (NgFor, NgIf, NgNonBindable, NgSwitch, NgSwitchWhen, NgSwitchDefault)**
 58 | ```dart
 59 | @Component(selector: 'my-component')
 60 | @View(templateUrl: "my-component.html", directives: const [CORE_DIRECTIVES])
 61 | class MyComponent {}
 62 | ```
 63 | 
 64 | **Add directives/components to be used in the template**
 65 | ```dart
 66 | @Directive(selector: '[opacity]')
 67 | class Opacity {/* ... */}
 68 | 
 69 | @Component(selector: '[item]')
 70 | @View(templateUrl: "item.html")
 71 | class Item {/* ... */}
 72 | 
 73 | @Component(selector: 'my-component')
 74 | @View(templateUrl: "my-component.html", directives: const [Opacity, Item])
 75 | class MyComponent {}
 76 | ```
 77 | 
 78 | #### @Component
 79 | 
 80 | **selector**: The CSS selector that triggers the instantiation of a directive.
 81 | 
 82 |    - `element-name`: select by element name.
 83 |    - `.class`: select by class name.
 84 |    - `[attribute]`: select by attribute name.
 85 |    - `[attribute=value]`: select by attribute name and value.
 86 |    - `:not(sub_selector)`: select only if the element does not match the `sub_selector`.
 87 |    - `selector1, selector2`: select if either `selector1` or `selector2` matches.
 88 | 
 89 | **Selector example**
 90 | ```dart
 91 | //<my-component></my-component>
 92 | @Component(selector: 'my-component')
 93 | @View(templateUrl: "my-component.html")
 94 | class MyComponent {}
 95 | 
 96 | //<div my-component></div>
 97 | @Directive(selector: '[my-component]')
 98 | @View(templateUrl: "my-component.html")
 99 | class MyComponent {}
100 | ```
101 | 
102 | **Inject dependencies into a component**
103 | ```dart
104 | @Injectable() //Needed for Angular transformer
105 | class MyService {}
106 | 
107 | @Component(selector: 'selector-name', appInjector: const [MyService])
108 | class MyComponent {
109 |     MyService service;
110 |     MyComponent(this.service);
111 | }
112 | ```
113 | 
114 | **Accesing host DOM element in a component/decorator**
115 | 
116 | ```dart
117 | import 'dart:html' as dom;
118 | import 'package:angular2/angular2.dart' show Directive, ElementRef;
119 | 
120 | //<div selector-name></div>
121 | @Directive(selector: '[selector-name]')
122 | class MyComponent {
123 |     dom.Element element;
124 |     MyComponent(ElementRef ref) {
125 |         element =  ref.nativeElement;
126 |     }
127 | }
128 | ```
129 | 
130 | **properties**: The `properties` property defines a set of `directiveProperty` to `bindingProperty`  key-value pairs. *Its optional*
131 |    - `directiveProperty` specifies the component property where the value is written.
132 |    - `bindingProperty` specifies the DOM property where the value is read from.
133 | 
134 | **Example of properties**
135 | ```dart
136 | //<my-component my-name="Hodor" my-desc="hooodor?"></my-component>
137 | @Component(
138 |     selector: 'my-component', 
139 |     properties: const [
140 |         'name: my-name',// -> set name(name)
141 |         'desc: my-desc'
142 | ])
143 | @View(templateUrl: "my-component.html")
144 | class MyComponent {
145 |     String _name;
146 |     int desc;
147 |     set name(name) => _name;
148 | }
149 | ```
150 | 


--------------------------------------------------------------------------------