refactor(examples): ts’ify

relates to angular#2008

Author: vicb

modules/examples/e2e_test/sourcemap/sourcemap_spec.es6

@@ -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\'\)/);

modules/examples/src/gestures/index.js

@@ -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);
+}

modules/examples/src/gestures/index.ts

@@ -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'; }
 }

modules/examples/src/hello_world/index.js renamed to modules/examples/src/hello_world/index.ts

@@ -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,31 +17,23 @@ import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabil
   >{{shiftEnter ? 'You pressed shift.enter!' : ''}}</div>`
 })
 class KeyEventsApp {
-  lastKey: string;
-  shiftEnter: boolean;
-
-  constructor() {
-    this.lastKey = '(none)';
-    this.shiftEnter = false;
-  }
+  lastKey: string = '(none)';
+  shiftEnter: boolean = 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() {
-  reflector.reflectionCapabilities = new ReflectionCapabilities(); // for the Dart version
+  reflector.reflectionCapabilities = new ReflectionCapabilities();  // for the Dart version
   bootstrap(KeyEventsApp);
 }

modules/examples/src/hello_world/index_common.js renamed to modules/examples/src/hello_world/index_common.ts

@@ -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);
+}