Skip to content

Instantly share code, notes, and snippets.

@cironunes

cironunes/01-index.html

Last active October 7, 2015 18:19
Show Gist options
  • Save cironunes/c28c8c9a447e9868ae75 to your computer and use it in GitHub Desktop.
Save cironunes/c28c8c9a447e9868ae75 to your computer and use it in GitHub Desktop.
Download ZIP
Simple HTML file to start working with Angular 2 Alpha Preview (Traceur + SystemJS + TypeScript)
Raw
01-index.html
<!DOCTYPE html>
<html>
<head>
<title>My First Angular 2 app</title>
</head>
<body>
<my-app>Loading...</my-app>
<!-- dependencies -->
<script src="https://code.angularjs.org/tools/traceur-runtime.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="typescript.config.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.39/angular2.min.js"></script>
<!-- /dependencies -->
<!-- load app using SystemJS -->
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
<!-- /load app using SystemJS-->
</body>
</html>
Raw
02-main.ts
import {bootstrap} from 'angular2/angular2';
import {App} from './app';
bootstrap(App, []);
Raw
03-app.ts
import {Component, View} from 'angular2/angular2';
@Component({
selector: 'my-app'
})
@View({
template: `Hello world!`
})
export class App {}
Raw
typescript.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: "."
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment