2015-11-19 19:08:23 -05:00
|
|
|
library hello_world.index;
|
|
|
|
|
2016-03-17 15:49:46 -04:00
|
|
|
import "package:angular2/platform/browser.dart"
|
|
|
|
show AngularEntrypoint, bootstrap;
|
2015-11-20 19:07:51 -05:00
|
|
|
import "package:angular2/angular2.dart"
|
|
|
|
show Component, Directive, ElementRef, Injectable, Renderer;
|
2015-11-19 19:08:23 -05:00
|
|
|
|
2015-11-24 14:03:02 -05:00
|
|
|
@AngularEntrypoint("Hello World Entrypoint")
|
2015-11-19 19:08:23 -05:00
|
|
|
main() {
|
|
|
|
bootstrap(HelloCmp);
|
|
|
|
}
|
|
|
|
|
|
|
|
@Injectable()
|
|
|
|
class GreetingService {
|
|
|
|
String greeting = "hello";
|
|
|
|
}
|
|
|
|
|
|
|
|
@Directive(selector: "[red]")
|
|
|
|
class RedDec {
|
|
|
|
RedDec(ElementRef el, Renderer renderer) {
|
2016-03-01 12:13:12 -05:00
|
|
|
renderer.setElementStyle(el.nativeElement, "color", "red");
|
2015-11-19 19:08:23 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component(
|
|
|
|
selector: "hello-app",
|
|
|
|
viewProviders: const [GreetingService],
|
|
|
|
template:
|
|
|
|
'''<div class="greeting">{{greeting}} <span red>world</span>!</div>
|
|
|
|
<button class="changeButton" (click)="changeGreeting()">change greeting</button>''',
|
|
|
|
directives: const [RedDec])
|
|
|
|
class HelloCmp {
|
|
|
|
String greeting;
|
|
|
|
HelloCmp(GreetingService service) {
|
|
|
|
this.greeting = service.greeting;
|
|
|
|
}
|
|
|
|
void changeGreeting() {
|
|
|
|
this.greeting = "howdy";
|
|
|
|
}
|
|
|
|
}
|