Skip to content

Instantly share code, notes, and snippets.

@bryanforbes

bryanforbes/README.md

Created April 26, 2016 19:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bryanforbes/b49fce91f2266fb526cab150a94d5d98 to your computer and use it in GitHub Desktop.
Save bryanforbes/b49fce91f2266fb526cab150a94d5d98 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} from 'angular2/core'
import {NG_VALIDATORS} from 'angular2/common'
const provider = new Provider(
NG_VALIDATORS,
{
useExisting: forwardRef(() => Foo),
multi: true
}
);
@Directive({
selector: 'input[foo][ngModel],input[foo][ngControl]',
providers: [provider]
inputs: [
"foo"
]
})
class Foo {
foo: string;
ngOnInit() {
console.log('onInit: ', this.foo);
}
validate(control) {
console.log('validate: ', this.foo);
}
}
@Component({
selector: 'my-app',
providers: [],
template: `
<input foo="bar" [(ngModel)]="blah">
`,
directives: [Foo]
})
export class App {
}
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