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", | |
'@angular': 'https://npmcdn.com/@angular', | |
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6' | |
}, | |
//packages defines our app package | |
packages: { | |
app: { | |
main: './main.ts', | |
defaultExtension: 'ts' | |
}, | |
'@angular/core': { | |
main: 'bundles/core.umd.js', | |
defaultExtension: 'js' | |
}, | |
'@angular/compiler': { | |
main: 'bundles/compiler.umd.js', | |
defaultExtension: 'js' | |
}, | |
'@angular/common': { | |
main: 'bundles/common.umd.js', | |
defaultExtension: 'js' | |
}, | |
'@angular/platform-browser-dynamic': { | |
main: 'bundles/platform-browser-dynamic.umd.js', | |
defaultExtension: 'js' | |
}, | |
'@angular/platform-browser': { | |
main: 'bundles/platform-browser.umd.js', | |
defaultExtension: 'js' | |
}, | |
rxjs: { | |
defaultExtension: 'js' | |
} | |
} | |
}); |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>angular2 playground</title> | |
<link rel="stylesheet" href="style.css" /> | |
<script src="https://npmcdn.com/zone.js@0.6.12/dist/zone.js"></script> | |
<script src="https://npmcdn.com/reflect-metadata@0.1.3/Reflect.js"></script> | |
<script src="https://npmcdn.com/systemjs@0.19.31/dist/system.js"></script> | |
<script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script> | |
<script src="config.js"></script> | |
<script> | |
System.import('app') | |
.catch(console.error.bind(console)); | |
</script> | |
</head> | |
<body> | |
<my-app> | |
loading... | |
</my-app> | |
</body> | |
</html> |
//our root app component | |
import {Component} from '@angular/core' | |
@Component({ | |
selector: 'my-app', | |
providers: [], | |
template: ` | |
<div> | |
<h2>Hello {{name}}</h2> | |
</div> | |
`, | |
directives: [] | |
}) | |
export class App { | |
constructor() { | |
this.name = 'Angular2 (Release Candidate!)' | |
} | |
} |
declare let $: JQuery; | |
export default $; | |
// import $ from "JQuery"; | |
// $("button.continue").html( "Next Step..." ); | |
// default is value, function, class |
export * from "./StringValidator"; // exports interface 'StringValidator' | |
export * from "./LettersOnlyValidator"; // exports class 'LettersOnlyValidator' | |
export * from "./ZipCodeValidator"; // exports class 'ZipCodeValidator' |
export class ParseIntBasedZipCodeValidator { | |
isAcceptable(s: string) { | |
return s.length === 5 && parseInt(s).toString() === s; | |
} | |
} | |
// Export original validator but rename it | |
export {ZipCodeValidator as RegExpBasedZipCodeValidator} from "./ZipCodeValidator"; |
export interface StringValidator { | |
isAcceptable(s: string): boolean; | |
} |
export const numberRegexp = /^[0-9]+$/; | |
export class ZipCodeValidator implements StringValidator { | |
isAcceptable(s: string) { | |
return s.length === 5 && numberRegexp.test(s); | |
} | |
} | |
// class ZipCodeValidator implements StringValidator { | |
// isAcceptable(s: string) { | |
// return s.length === 5 && numberRegexp.test(s); | |
// } | |
// } | |
// export { ZipCodeValidator }; | |
// export { ZipCodeValidator as mainValidator }; | |
// single import | |
import { ZipCodeValidator } from "./ZipCodeValidator"; | |
let myValidator = new ZipCodeValidator(); | |
// rename | |
import { ZipCodeValidator as ZCV } from "./ZipCodeValidator"; | |
let myValidator = new ZCV(); | |
// module as single variable | |
import * as validator from "./ZipCodeValidator"; | |
let myValidator = new validator.ZipCodeValidator(); | |
// global state module | |
// import "./my-module.js"; | |
//main entry point | |
import {bootstrap} from '@angular/platform-browser-dynamic'; | |
import {App} from './app'; | |
bootstrap(App, []) | |
.catch(err => console.error(err)); |
/* Styles go here */ | |