Skip to content

Instantly share code, notes, and snippets.

@bryanforbes

bryanforbes/README.md

Last active April 26, 2016 21:18
Show Gist options
  • Save bryanforbes/7500849bedd0559d80faa27d087f7179 to your computer and use it in GitHub Desktop.
Save bryanforbes/7500849bedd0559d80faa27d087f7179 to your computer and use it in GitHub Desktop.
Download ZIP
Angular2 + Typescript Demo Plunk
Raw
README.md

Angular2 Starter Plunker - Typescript - Beta 0

A simple plunker demonstrating Angular2 usage:

  • Uses SystemJS + TypeScript to compile on the fly
  • Includes binding, directives, http, pipes, and DI usage.
Raw
config.js
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: "./src"
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
}
}
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/2.0.0-beta.16/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="config.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.16/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.16/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.16/http.dev.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
Raw
src\app.ts
//our root app component
import {Component, Directive, Provider, forwardRef, ViewChild, Input, Output, EventEmitter} from 'angular2/core'
import {NG_VALIDATORS} from 'angular2/common'
@Component({
selector: 'my-thing',
template: 'My Thing'
})
class Foo {
}
@Component({
selector: 'my-app',
template: `
<template [ngIf]="show">
<button type="button" (click)="onClickFirst(thing)">Click me</button> Result: {{ firstText }}
</template>
<br>
<button type="button" (click)="onClickSecond(thing)">Click me</button> Result: {{ secondText }}
<br>
<my-thing #thing></my-thing>
`,
directives: [Foo]
})
export class App {
show = true;
firstText = '';
secondText = '';
onClickFirst(thing: any) {
this.firstText = thing ? 'A Thing' : 'undefined'
}
onClickSecond(thing: any) {
this.secondText = thing ? 'A Thing' : 'undefined'
}
}
Raw
src\main.ts
//main entry point
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
bootstrap(App, [])
.catch(err => console.error(err));
Raw
style.css
/* Styles go here */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment