parent
16bf335a4a
commit
5bab607f44
|
@ -4,7 +4,7 @@ describe('hello world', function() {
|
|||
|
||||
afterEach(verifyNoBrowserErrors);
|
||||
|
||||
describe('static reflection', function() {
|
||||
describe('hello world app', function() {
|
||||
var URL = 'examples/src/hello_world/index.html';
|
||||
|
||||
it('should greet', function() {
|
||||
|
@ -21,23 +21,6 @@ describe('hello world', function() {
|
|||
});
|
||||
});
|
||||
|
||||
describe('dynamic reflection', function() {
|
||||
var URL = 'examples/src/hello_world/index_dynamic.html';
|
||||
|
||||
it('should greet', function() {
|
||||
browser.get(URL);
|
||||
|
||||
expect(getComponentText('hello-app', '.greeting')).toEqual('hello world!');
|
||||
});
|
||||
|
||||
it('should change greeting', function() {
|
||||
browser.get(URL);
|
||||
|
||||
clickComponentButton('hello-app', '.changeButton');
|
||||
expect(getComponentText('hello-app', '.greeting')).toEqual('howdy world!');
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function getComponentText(selector, innerSelector) {
|
||||
|
|
|
@ -4,7 +4,7 @@ describe('Zippy Component', function() {
|
|||
|
||||
afterEach(verifyNoBrowserErrors);
|
||||
|
||||
describe('dynamic reflection', function() {
|
||||
describe('zippy', function() {
|
||||
var URL = 'examples/src/zippy_component/index.html';
|
||||
|
||||
beforeEach(function() { browser.get(URL); });
|
||||
|
|
|
@ -21,8 +21,6 @@ transformers:
|
|||
# The build currently fails on material files because there is not yet
|
||||
# support for transforming cross-package urls. (see issue #2982)
|
||||
- 'web/src/material/**'
|
||||
# No need to transform the dart:mirrors specific entrypoints
|
||||
- '**/index_dynamic.dart'
|
||||
entry_points:
|
||||
- web/src/gestures/index.dart
|
||||
- web/src/hello_world/index.dart
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import {HelloCmp} from './index_common';
|
||||
import {bootstrap} from 'angular2/bootstrap';
|
||||
import {ElementRef, Component, Directive, View, Injectable} from 'angular2/core';
|
||||
import {Renderer} from 'angular2/render';
|
||||
|
||||
export function main() {
|
||||
// Bootstrapping only requires specifying a root component.
|
||||
|
@ -11,3 +12,54 @@ export function main() {
|
|||
// example 'Loading...') before the application is ready.
|
||||
bootstrap(HelloCmp);
|
||||
}
|
||||
|
||||
// A service available to the Injector, used by the HelloCmp component.
|
||||
@Injectable()
|
||||
class GreetingService {
|
||||
greeting: string = '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.
|
||||
constructor(el: ElementRef, 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({
|
||||
// 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.
|
||||
viewBindings: [GreetingService]
|
||||
})
|
||||
// The template for the component.
|
||||
@View({
|
||||
// Expressions in the template (like {{greeting}}) are evaluated in the
|
||||
// context of the HelloCmp class below.
|
||||
template: `<div class="greeting">{{greeting}} <span red>world</span>!</div>
|
||||
<button class="changeButton" (click)="changeGreeting()">change greeting</button>`,
|
||||
// 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]
|
||||
})
|
||||
export class HelloCmp {
|
||||
greeting: string;
|
||||
|
||||
constructor(service: GreetingService) { this.greeting = service.greeting; }
|
||||
|
||||
changeGreeting(): void { this.greeting = 'howdy'; }
|
||||
}
|
||||
|
|
|
@ -1,53 +0,0 @@
|
|||
import {ElementRef, Component, Directive, View, Injectable} from 'angular2/core';
|
||||
import {Renderer} from 'angular2/render';
|
||||
|
||||
// A service available to the Injector, used by the HelloCmp component.
|
||||
@Injectable()
|
||||
class GreetingService {
|
||||
greeting: string = '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.
|
||||
constructor(el: ElementRef, 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({
|
||||
// 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.
|
||||
viewBindings: [GreetingService]
|
||||
})
|
||||
// The template for the component.
|
||||
@View({
|
||||
// Expressions in the template (like {{greeting}}) are evaluated in the
|
||||
// context of the HelloCmp class below.
|
||||
template: `<div class="greeting">{{greeting}} <span red>world</span>!</div>
|
||||
<button class="changeButton" (click)="changeGreeting()">change greeting</button>`,
|
||||
// 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]
|
||||
})
|
||||
export class HelloCmp {
|
||||
greeting: string;
|
||||
|
||||
constructor(service: GreetingService) { this.greeting = service.greeting; }
|
||||
|
||||
changeGreeting(): void { this.greeting = 'howdy'; }
|
||||
}
|
|
@ -1,11 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<title>Hello Angular 2.0 (Reflection)</title>
|
||||
<body>
|
||||
<hello-app>
|
||||
Loading...
|
||||
</hello-app>
|
||||
|
||||
$SCRIPTS$
|
||||
</body>
|
||||
</html>
|
|
@ -1,8 +0,0 @@
|
|||
import {HelloCmp} from './index_common';
|
||||
import {bootstrap} from 'angular2/bootstrap';
|
||||
|
||||
// This entry point is not transformed and exists for testing dynamic runtime
|
||||
// mode.
|
||||
export function main() {
|
||||
bootstrap(HelloCmp);
|
||||
}
|
|
@ -1,11 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<title>Angular 2.0 Http (Reflection)</title>
|
||||
<body>
|
||||
<http-app>
|
||||
Loading...
|
||||
</http-app>
|
||||
|
||||
$SCRIPTS$
|
||||
</body>
|
||||
</html>
|
|
@ -1,8 +0,0 @@
|
|||
import {HttpCmp} from './http_comp';
|
||||
import {bootstrap} from 'angular2/bootstrap';
|
||||
import {HTTP_BINDINGS} from 'angular2/http';
|
||||
|
||||
export function main() {
|
||||
// This entry point is not transformed and exists for testing dynamic mode.
|
||||
bootstrap(HttpCmp, [HTTP_BINDINGS]);
|
||||
}
|
|
@ -1,11 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<title>Angular 2.0 Jsonp (Reflection)</title>
|
||||
<body>
|
||||
<jsonp-app>
|
||||
Loading...
|
||||
</jsonp-app>
|
||||
|
||||
$SCRIPTS$
|
||||
</body>
|
||||
</html>
|
|
@ -1,7 +0,0 @@
|
|||
import {JsonpCmp} from './jsonp_comp';
|
||||
import {bootstrap} from 'angular2/bootstrap';
|
||||
import {JSONP_BINDINGS} from 'angular2/http';
|
||||
|
||||
export function main() {
|
||||
bootstrap(JsonpCmp, [JSONP_BINDINGS]);
|
||||
}
|
Loading…
Reference in New Issue