<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/2.0.0-beta.0/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.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/http.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
/* Styles go here */
### 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.
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'
}
}
});
//main entry point
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
bootstrap(App, [])
.catch(err => console.error(err));
import { Component } from 'angular2/core';
import { DatePipe } from "angular2/common";
import { ArraySortPipe } from "./pipe";
@Component({
selector: 'my-app',
providers: [],
pipes: [DatePipe, ArraySortPipe],
template: `
<ul>
<li *ngFor="#item of array | arraySort:'-date'">{{item.name}} {{item.date | date:'medium' }}</li>
</ul>
`,
directives: []
})
export class App {
array: Array<any> = [{
name: "John",
date: new Date('2005-12-17T03:24:00')
},
{
name: "Smith",
date: new Date('2008-12-17T03:24:00')
},
{
name: "Suzan",
date: new Date('2009-12-17T03:24:00')
}]
constructor() {}
}
import { Pipe } from "angular2/core";
@Pipe({
name: "arraySort"
})
export class ArraySortPipe {
transform(array: Array<string>, args: string): Array<string> {
if (typeof args[0] === "undefined") {
return array;
}
let direction = args[0][0];
let column = args[0].slice(1);
array.sort((a: any, b: any) => {
let left = Number(new Date(a[column]));
let right = Number(new Date(b[column]));
return (direction === "-") ? right - left : left - right;
});
return array;
}
}