chore(analytics): Build hello_world, check constraints
Create gulp targets to build `hello_world` and check its gzipped size against size constraints. See #5312, #5314
This commit is contained in:
68
modules_dart/payload/hello_world/web/index.dart
Normal file
68
modules_dart/payload/hello_world/web/index.dart
Normal file
@ -0,0 +1,68 @@
|
||||
library hello_world.index;
|
||||
|
||||
import "package:angular2/bootstrap.dart" show bootstrap;
|
||||
import "package:angular2/core.dart"
|
||||
show ElementRef, Component, Directive, Injectable;
|
||||
import "package:angular2/render.dart" show Renderer;
|
||||
|
||||
main() {
|
||||
// Bootstrapping only requires specifying a root component.
|
||||
|
||||
// The boundary between the Angular application and the rest of the page is
|
||||
|
||||
// the shadowDom of this root component.
|
||||
|
||||
// The selector of the component passed in is used to find where to insert the
|
||||
|
||||
// application.
|
||||
|
||||
// You can use the light dom of the <hello-app> tag as temporary content (for
|
||||
|
||||
// example 'Loading...') before the application is ready.
|
||||
bootstrap(HelloCmp);
|
||||
}
|
||||
|
||||
// A service available to the Injector, used by the HelloCmp component.
|
||||
@Injectable()
|
||||
class GreetingService {
|
||||
String greeting = "hello";
|
||||
}
|
||||
// Directives are light-weight. They don't allow new
|
||||
|
||||
// expression contexts (use @Component for those needs).
|
||||
@Directive(selector: "[red]")
|
||||
class RedDec {
|
||||
// ElementRef is always injectable and it wraps the element on which the
|
||||
|
||||
// directive was found by the compiler.
|
||||
RedDec(ElementRef el, Renderer renderer) {
|
||||
renderer.setElementStyle(el, "color", "red");
|
||||
}
|
||||
}
|
||||
// Angular 2.0 supports 2 basic types of directives:
|
||||
|
||||
// - Component - the basic building blocks of Angular 2.0 apps. Backed by
|
||||
|
||||
// ShadowDom.(http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/)
|
||||
|
||||
// - Directive - add behavior to existing elements.
|
||||
|
||||
// @Component is AtScript syntax to annotate the HelloCmp class as an Angular
|
||||
|
||||
// 2.0 component.
|
||||
@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";
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user