honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(examples): ts’ify 

relates to #2008
This commit is contained in:
Victor Berchet 2015-05-22 14:39:00 +02:00
parent 4b98ed114e
commit 6c1cb089b5
14 changed files with 163 additions and 281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
modules/examples/e2e_test/sourcemap/sourcemap_spec.es6
View File

@ -37,12 +37,12 @@ describe('sourcemaps', function () {
});
var finalMapData = fs.readFileSync(
'dist/js/prod/es6/examples/src/sourcemap/index.map');
'dist/js/prod/es6/examples/src/sourcemap/index.es6.map');
var finalDecoder = new sourceMap.SourceMapConsumer(JSON.parse(finalMapData));
var finalPosition = finalDecoder.originalPositionFor(originalPosition);
var sourceCodeLines = fs.readFileSync('modules/examples/src/sourcemap/index.js',
var sourceCodeLines = fs.readFileSync('modules/examples/src/sourcemap/index.ts',
{encoding: 'UTF-8'}).split('\n');
expect(sourceCodeLines[finalPosition.line - 1])
.toMatch(/throw new BaseException\(\'Sourcemap test\'\)/);

39
modules/examples/src/gestures/index.js
View File

@ -1,39 +0,0 @@
import {bootstrap} from 'angular2/angular2';
import {reflector} from 'angular2/src/reflection/reflection';
import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
// add those imports back into 'angular2/angular2';
import {Component} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
@Component({selector: 'gestures-app'})
@View({templateUrl: 'template.html'})
class GesturesCmp {
swipeDirection: string;
pinchScale: number;
rotateAngle: number;
constructor() {
this.swipeDirection = '-';
this.pinchScale = 1;
this.rotateAngle = 0;
}
onSwipe(event) {
this.swipeDirection = event.deltaX > 0 ? 'right' : 'left';
}
onPinch(event) {
this.pinchScale = event.scale;
}
onRotate(event) {
this.rotateAngle = event.rotation;
}
}
export function main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(GesturesCmp);
}

22
modules/examples/src/gestures/index.ts Normal file
View File

@ -0,0 +1,22 @@
import {bootstrap, Component, View} from 'angular2/angular2';
import {reflector} from 'angular2/src/reflection/reflection';
import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
@Component({selector: 'gestures-app'})
@View({templateUrl: 'template.html'})
class GesturesCmp {
swipeDirection: string = '-';
pinchScale: number = 1;
rotateAngle: number = 0;
onSwipe(event): void { this.swipeDirection = event.deltaX > 0 ? 'right' : 'left'; }
onPinch(event): void { this.pinchScale = event.scale; }
onRotate(event): void { this.rotateAngle = event.rotation; }
}
export function main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(GesturesCmp);
}

0
modules/examples/src/hello_world/index.js → modules/examples/src/hello_world/index.ts
View File

50
modules/examples/src/hello_world/index_common.js → modules/examples/src/hello_world/index_common.ts
View File

@ -1,11 +1,19 @@
import {ElementRef} from 'angular2/angular2';
import {Injectable} from 'angular2/src/di/annotations_impl';
import {ElementRef, Component, Directive, View, Injectable} from 'angular2/angular2';
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
// add those imports back into 'angular2/angular2';
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
// 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) { el.domElement.style.color = 'red'; }
}
// Angular 2.0 supports 2 basic types of directives:
// - Component - the basic building blocks of Angular 2.0 apps. Backed by
@ -28,7 +36,7 @@ import {View} from 'angular2/src/core/annotations_impl/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><content></content>`,
<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
@ -37,32 +45,8 @@ import {View} from 'angular2/src/core/annotations_impl/view';
})
export class HelloCmp {
greeting: string;
constructor(service: GreetingService) {
this.greeting = service.greeting;
}
changeGreeting() {
this.greeting = 'howdy';
}
}
// 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) {
el.domElement.style.color = 'red';
}
}
constructor(service: GreetingService) { this.greeting = service.greeting; }
// A service available to the Injector, used by the HelloCmp component.
@Injectable()
class GreetingService {
greeting:string;
constructor() {
this.greeting = 'hello';
}
changeGreeting(): void { this.greeting = 'howdy'; }
}

0
modules/examples/src/hello_world/index_dynamic.js → modules/examples/src/hello_world/index_dynamic.ts
View File

30
modules/examples/src/key_events/index.js → modules/examples/src/key_events/index.ts
View File

@ -1,18 +1,10 @@
import {bootstrap} from 'angular2/angular2';
import {bootstrap, Component, View} from 'angular2/angular2';
import {KeyEventsPlugin} from 'angular2/src/render/dom/events/key_events';
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
// add those imports back into 'angular2/angular2';
import {Component} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
// 2 imports for the Dart version:
import {reflector} from 'angular2/src/reflection/reflection';
import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
@Component({
selector: 'key-events-app'
})
@Component({selector: 'key-events-app'})
@View({
template: `Click in the following area and press a key to display its name:<br>
<div (keydown)="onKeyDown($event)" class="sample-area" tabindex="0">{{lastKey}}</div><br>
@ -25,28 +17,20 @@ import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabil
>{{shiftEnter ? 'You pressed shift.enter!' : ''}}</div>`
})
class KeyEventsApp {
lastKey: string;
shiftEnter: boolean;
lastKey: string = '(none)';
shiftEnter: boolean = false;
constructor() {
this.lastKey = '(none)';
this.shiftEnter = false;
}
onKeyDown(event) {
onKeyDown(event): void {
this.lastKey = KeyEventsPlugin.getEventFullKey(event);
event.preventDefault();
}
onShiftEnter(event) {
onShiftEnter(event): void {
this.shiftEnter = true;
event.preventDefault();
}
resetShiftEnter() {
this.shiftEnter = false;
}
resetShiftEnter(): void { this.shiftEnter = false; }
}
export function main() {

24
modules/examples/src/sourcemap/index.js
View File

@ -1,24 +0,0 @@
import { BaseException, print, CONST } from 'angular2/src/facade/lang';
import { bootstrap } from 'angular2/angular2';
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
// add those imports back into 'angular2/angular2';
import {Component} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
@Component({
selector: 'error-app',
})
@View({
template: `
<button class="errorButton" (click)="createError()">create error</button>`,
directives: []
})
export class ErrorComponent {
createError() {
throw new BaseException('Sourcemap test');
}
}
export function main() {
bootstrap(ErrorComponent);
}

17
modules/examples/src/sourcemap/index.ts Normal file
View File

@ -0,0 +1,17 @@
import {BaseException} from 'angular2/src/facade/lang';
import {bootstrap, Component, View} from 'angular2/angular2';
@Component({
selector: 'error-app',
})
@View({
template: `
<button class="errorButton" (click)="createError()">create error</button>`
})
export class ErrorComponent {
createError(): void { throw new BaseException('Sourcemap test'); }
}
export function main() {
bootstrap(ErrorComponent);
}

83
modules/examples/src/todo/index.js
View File

@ -1,83 +0,0 @@
import {bootstrap, NgFor} from 'angular2/angular2';
import {Store, Todo, TodoFactory} from './services/TodoStore';
import {reflector} from 'angular2/src/reflection/reflection';
import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
// TODO(radokirov): Once the application is transpiled by TS instead of Traceur,
// add those imports back into 'angular2/angular2';
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
@Component({
selector: 'todo-app',
appInjector: [
Store,
TodoFactory
]
})
@View({
templateUrl: 'todo.html',
directives: [NgFor]
})
class TodoApp {
todoStore: Store;
todoEdit: Todo;
factory: TodoFactory;
constructor(store: Store, factory: TodoFactory) {
this.todoStore = store;
this.todoEdit = null;
this.factory = factory;
}
enterTodo($event, inputElement) {
if($event.which === 13) { // ENTER_KEY
this.addTodo(inputElement.value);
inputElement.value = '';
}
}
editTodo(todo: Todo) {
this.todoEdit = todo;
}
doneEditing($event, todo: Todo) {
var which = $event.which;
var target = $event.target;
if(which === 13) {
todo.title = target.value;
this.todoEdit = null;
} else if (which === 27) {
this.todoEdit = null;
target.value = todo.title;
}
}
addTodo(newTitle: string) {
this.todoStore.add(this.factory.create(newTitle, false));
}
completeMe(todo: Todo) {
todo.completed = !todo.completed;
}
deleteMe(todo: Todo) {
this.todoStore.remove(todo);
}
toggleAll($event) {
var isComplete = $event.target.checked;
this.todoStore.list.forEach((todo) => {
todo.completed = isComplete;
});
}
clearCompleted() {
this.todoStore.removeBy((todo) => todo.completed);
}
}
export function main() {
reflector.reflectionCapabilities = new ReflectionCapabilities(); // for the Dart version
bootstrap(TodoApp);
}

49
modules/examples/src/todo/index.ts Normal file
View File

@ -0,0 +1,49 @@
import {bootstrap, NgFor, Component, View} from 'angular2/angular2';
import {Store, Todo, TodoFactory} from './services/TodoStore';
import {reflector} from 'angular2/src/reflection/reflection';
import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
@Component({selector: 'todo-app', appInjector: [Store, TodoFactory]})
@View({templateUrl: 'todo.html', directives: [NgFor]})
class TodoApp {
todoEdit: Todo = null;
constructor(public todoStore: Store, public factory: TodoFactory) {}
enterTodo($event, inputElement): void {
this.addTodo(inputElement.value);
inputElement.value = '';
}
editTodo(todo: Todo): void { this.todoEdit = todo; }
doneEditing($event, todo: Todo): void {
var which = $event.which;
var target = $event.target;
if (which === 13) {
todo.title = target.value;
this.todoEdit = null;
} else if (which === 27) {
this.todoEdit = null;
target.value = todo.title;
}
}
addTodo(newTitle: string): void { this.todoStore.add(this.factory.create(newTitle, false)); }
completeMe(todo: Todo): void { todo.completed = !todo.completed; }
deleteMe(todo: Todo): void { this.todoStore.remove(todo); }
toggleAll($event): void {
var isComplete = $event.target.checked;
this.todoStore.list.forEach((todo: Todo) => { todo.completed = isComplete; });
}
clearCompleted(): void { this.todoStore.removeBy((todo) => todo.completed); }
}
export function main() {
reflector.reflectionCapabilities = new ReflectionCapabilities(); // for the Dart version
bootstrap(TodoApp);
}

75
modules/examples/src/todo/services/TodoStore.js
View File

@ -1,75 +0,0 @@
import {Injectable} from 'angular2/src/di/annotations_impl';
import {ListWrapper} from 'angular2/src/facade/collection';
// base model for RecordStore
export class KeyModel {
key:number;
constructor(k:number) {
this.key = k;
}
}
export class Todo extends KeyModel {
title: string;
completed: boolean;
constructor(key: number, theTitle: string, isCompleted: boolean) {
super(key);
this.title = theTitle;
this.completed = isCompleted;
}
}
@Injectable()
export class TodoFactory {
_uid: number;
constructor() {
this._uid = 0;
}
nextUid() {
this._uid = this._uid + 1;
return this._uid;
}
create(title: string, isCompleted: boolean) {
return new Todo(this.nextUid(), title, isCompleted);
}
}
// Store manages any generic item that inherits from KeyModel
@Injectable()
export class Store {
list: List<KeyModel>;
constructor() {
this.list = [];
}
add(record: KeyModel) {
ListWrapper.push(this.list, record);
}
remove(record: KeyModel) {
this.spliceOut(record);
}
removeBy(callback: Function) {
var records = ListWrapper.filter(this.list, callback);
ListWrapper.removeAll(this.list, records);
}
spliceOut(record: KeyModel) {
var i = this.indexFor(record);
if( i > -1 ) {
return ListWrapper.splice(this.list, i, 1)[0];
}
return null;
}
indexFor(record: KeyModel) {
return this.list.indexOf(record);
}
}

47
modules/examples/src/todo/services/TodoStore.ts Normal file
View File

@ -0,0 +1,47 @@
import {Injectable} from 'angular2/angular2';
import {ListWrapper} from 'angular2/src/facade/collection';
// base model for RecordStore
export class KeyModel {
constructor(public key: number) {}
}
export class Todo extends KeyModel {
constructor(key: number, public title: string, public completed: boolean) { super(key); }
}
@Injectable()
export class TodoFactory {
_uid: number = 0;
nextUid(): number { return ++this._uid; }
create(title: string, isCompleted: boolean): Todo {
return new Todo(this.nextUid(), title, isCompleted);
}
}
// Store manages any generic item that inherits from KeyModel
@Injectable()
export class Store {
list: List<KeyModel> = [];
add(record: KeyModel): void { ListWrapper.push(this.list, record); }
remove(record: KeyModel): void { this._spliceOut(record); }
removeBy(callback: Function): void {
var records = ListWrapper.filter(this.list, callback);
ListWrapper.removeAll(this.list, records);
}
private _spliceOut(record: KeyModel) {
var i = this._indexFor(record);
if (i > -1) {
return ListWrapper.splice(this.list, i, 1)[0];
}
return null;
}
private _indexFor(record: KeyModel) { return this.list.indexOf(record); }
}

2
modules/examples/src/todo/todo.html
View File

@ -9,7 +9,7 @@
placeholder="What needs to be done?"
autofocus
#newtodo
(keyup)="enterTodo($event, newtodo)">
(keyup.enter)="enterTodo($event, newtodo)">
</header>
<section id="main">