Skip to content

Instantly share code, notes, and snippets.

@TheLarkInn

TheLarkInn/README.md

Created June 3, 2016 15:24
Show Gist options
  • Save TheLarkInn/79d6319ef4caf1993a63c75e90d0a52a to your computer and use it in GitHub Desktop.
Save TheLarkInn/79d6319ef4caf1993a63c75e90d0a52a to your computer and use it in GitHub Desktop.
Download ZIP
Angular2 + Typescript Demo Plunk
Raw
README.md

Angular2 Starter Plunker - Typescript - RC.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",
'@angular': 'https://npmcdn.com/@angular',
'rxjs': 'https://npmcdn.com/[email protected]'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
'@angular/core': {
main: 'core.umd.js',
defaultExtension: 'js'
},
'@angular/compiler': {
main: 'compiler.umd.js',
defaultExtension: 'js'
},
'@angular/common': {
main: 'common.umd.js',
defaultExtension: 'js'
},
'@angular/platform-browser-dynamic': {
main: 'platform-browser-dynamic.umd.js',
defaultExtension: 'js'
},
'@angular/platform-browser': {
main: 'platform-browser.umd.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
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.17/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>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<myApp>
loading...
</myApp>
</body>
</html>
Raw
src\app.ts
import { Component, EventEmitter, Output } from '@angular/core'
@Component({
selector: 'myComp',
template: `
<div style="border: 1px solid #000; margin: 10px; padding: 10px;">
<p>MyComp component</p>
<button (click)="myEvent.emit('button click')">EMIT EVENT</button>
</div>
`
})
export class MyComp {
@Output() myEvent = new EventEmitter(false)
ngOnDestroy() {
console.log('myComp > ngOnDestroy');
this.myEvent.emit('ngOnDestroy hook');
}
}
@Component({
selector: 'myApp',
template: `
<div style="border: 1px solid #000; margin: 10px; padding: 10px;">
<p>MyApp component</p>
<button (click)="displayComp = !displayComp">ADD/REMOVE</button>
<div *ngIf="displayComp === true">
<myComp (myEvent)="test($event)"></myComp>
</div>
</div>
`,
directives: [MyComp]
})
export class MyApp {
displayComp = true
constructor() {}
test(e) {
console.log('myApp > receive event >>> ', e);
}
}
Raw
src\main.ts
//main entry point
import {bootstrap} from '@angular/platform-browser-dynamic';
import {MyApp} from './app';
bootstrap(MyApp, [])
.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