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]],