diff --git a/modules/examples/src/hello_world/index.js b/modules/examples/src/hello_world/index.js
index 2e3ee8402a..28c3e55ffc 100644
--- a/modules/examples/src/hello_world/index.js
+++ b/modules/examples/src/hello_world/index.js
@@ -1,68 +1,14 @@
-import {bootstrap, Component, Decorator, TemplateConfig, NgElement} from 'core/core';
-
-// Angular 2.0 supports 3 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/)
-// - Decorator - add behavior to existing elements.
-// - Template - allow for stamping out of a html template (not in this demo).
-
-// @Component is AtScript syntax to annotate the HelloCmp class as an Angular
-// 2.0 component.
-@Component({
- // The Selector prop tells Angular on which elements to instantiate this
- // class. The syntax supported is a basic subset of CSS selectors, for example
- // 'element', '[attr]', [attr=foo]', etc.
- selector: 'hello-app',
- // These are services that would be created if a class in the component's
- // template tries to inject them.
- componentServices: [GreetingService],
- template: new TemplateConfig({
- // The template for the component.
- // Expressions in the template (like {{greeting}}) are evaluated in the
- // context of the HelloCmp class below.
- inline: `{{greeting}} world!`,
- // All directives used in the template need to be specified. This allows for
- // modularity (RedDec can only be used in this template)
- // and better tooling (the template can be invalidated if the attribute is
- // misspelled).
- directives: [RedDec]
- })
-})
-class HelloCmp {
- greeting: string;
- constructor(service: GreetingService) {
- this.greeting = service.greeting;
- }
-}
-
-// Decorators are light-weight. They don't allow for templates, or new
-// expression contexts (use @Component or @Template for those needs).
-@Decorator({
- selector: '[red]'
-})
-class RedDec {
- // NgElement is always injectable and it wraps the element on which the
- // directive was found by the compiler.
- constructor(el: NgElement) {
- el.domElement.style.color = 'red';
- }
-}
-
-// A service used by the HelloCmp component.
-class GreetingService {
- greeting:string;
- constructor() {
- this.greeting = 'hello';
- }
-}
+import * as app from './index_common';
+import {reflector} from 'reflection/reflection';
+import {ReflectionCapabilities} from 'reflection/reflection_capabilities';
export function 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 tag as temporary content (for
- // example 'Loading...') before the application is ready.
- bootstrap(HelloCmp);
+ // Initializing the reflector is only required for the Dart version of the application.
+ // When using Dart, the reflection information is not embedded by default in the source code
+ // to keep the size of the generated file small. Importing ReflectionCapabilities and initializing
+ // the reflector is required to use the reflection information from Dart mirrors.
+ // Dart mirrors are not intended to be use in production code where the transformers generate a
+ // more optimal static configuration, see index_static.js for an example.
+ reflector.reflectionCapabilities = new ReflectionCapabilities();
+ app.main();
}
diff --git a/modules/examples/src/hello_world/index_common.js b/modules/examples/src/hello_world/index_common.js
new file mode 100644
index 0000000000..2e3ee8402a
--- /dev/null
+++ b/modules/examples/src/hello_world/index_common.js
@@ -0,0 +1,68 @@
+import {bootstrap, Component, Decorator, TemplateConfig, NgElement} from 'core/core';
+
+// Angular 2.0 supports 3 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/)
+// - Decorator - add behavior to existing elements.
+// - Template - allow for stamping out of a html template (not in this demo).
+
+// @Component is AtScript syntax to annotate the HelloCmp class as an Angular
+// 2.0 component.
+@Component({
+ // The Selector prop tells Angular on which elements to instantiate this
+ // class. The syntax supported is a basic subset of CSS selectors, for example
+ // 'element', '[attr]', [attr=foo]', etc.
+ selector: 'hello-app',
+ // These are services that would be created if a class in the component's
+ // template tries to inject them.
+ componentServices: [GreetingService],
+ template: new TemplateConfig({
+ // The template for the component.
+ // Expressions in the template (like {{greeting}}) are evaluated in the
+ // context of the HelloCmp class below.
+ inline: `{{greeting}} world!`,
+ // All directives used in the template need to be specified. This allows for
+ // modularity (RedDec can only be used in this template)
+ // and better tooling (the template can be invalidated if the attribute is
+ // misspelled).
+ directives: [RedDec]
+ })
+})
+class HelloCmp {
+ greeting: string;
+ constructor(service: GreetingService) {
+ this.greeting = service.greeting;
+ }
+}
+
+// Decorators are light-weight. They don't allow for templates, or new
+// expression contexts (use @Component or @Template for those needs).
+@Decorator({
+ selector: '[red]'
+})
+class RedDec {
+ // NgElement is always injectable and it wraps the element on which the
+ // directive was found by the compiler.
+ constructor(el: NgElement) {
+ el.domElement.style.color = 'red';
+ }
+}
+
+// A service used by the HelloCmp component.
+class GreetingService {
+ greeting:string;
+ constructor() {
+ this.greeting = 'hello';
+ }
+}
+
+export function 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 tag as temporary content (for
+ // example 'Loading...') before the application is ready.
+ bootstrap(HelloCmp);
+}
diff --git a/modules/examples/src/hello_world/index_static.js b/modules/examples/src/hello_world/index_static.js
index 41f67de9ed..6eff25464c 100644
--- a/modules/examples/src/hello_world/index_static.js
+++ b/modules/examples/src/hello_world/index_static.js
@@ -1,4 +1,4 @@
-import * as app from './index';
+import * as app from './index_common';
import {Component, Decorator, TemplateConfig, NgElement} from 'core/core';
import {Parser} from 'change_detection/parser/parser';
@@ -49,7 +49,6 @@ function setup() {
"annotations": []
});
-
reflector.registerType(Parser, {
"factory": (lexer) => new Parser(lexer),
"parameters": [[Lexer]],