Bootstrap angular
import 'package:angular2/bootstrap.dart' show bootstrap;
main() => bootstrap(MyApp); //MyApp is a componentBootstrap angular with default router
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 #
]);
}@Component(selector: 'selector-name', viewBindings: const [injectables])
@View(templateUrl: "home.html", directives: const [directives])
class MyComponent {}template: replace the current element with the contents of the HTML string.
//<my-banner></my-banner>
@Component(selector: 'my-banner')
@View(template: '<div class="banner">...</div>')
class MyBanner {}templateUrl: replace the current element with the contents loaded by the specified URL
//<my-banner></my-banner>
@Component(selector: 'my-banner')
@View(templateUrl: 'package:mypackage/my-banner.html')
class MyBanner {}<!-- my-banner.html -->
<div class="banner">...</div>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)
@Component(selector: 'my-component')
@View(templateUrl: "my-component.html", directives: const [CORE_DIRECTIVES])
class MyComponent {}Add directives/components to be used in the template
@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 {}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 thesub_selector.selector1, selector2: select if eitherselector1orselector2matches.
Selector example
//<my-component></my-component>
@Component(selector: 'my-component')
@View(templateUrl: "my-component.html")
class MyComponent {}
//<div my-component></div>
@Directive(selector: '[my-component]')
@View(templateUrl: "my-component.html")
class MyComponent {}Inject dependencies into a component
@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
import 'dart:html' as dom;
import 'package:angular2/angular2.dart' show Directive, ElementRef;
//<div selector-name></div>
@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
directivePropertyspecifies the component property where the value is written.bindingPropertyspecifies the DOM property where the value is read from.
Example of properties
//<my-component my-name="Hodor" my-desc="hooodor?"></my-component>
@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;
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent