chore: rename modules/examples to modules/playground

The directory contains code authored in a style that makes it transpilable to dart. As such, these are not idiomatic examples of Angular 2 usage.

The main purpose of this directory is to enable experimentation with Angular within the angular/angular repository.

Closes #4342

Closes #4639

modules/playground/src/hello_world/index.ts

@@ -0,0 +1,62 @@
+import {bootstrap} from 'angular2/bootstrap';
+import {ElementRef, Component, Directive, Injectable} from 'angular2/core';
+import {Renderer} from 'angular2/render';
+
+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 <hello-app> tag as temporary content (for
+  // 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.
+  viewProviders: [GreetingService],
+  // 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'; }
+}