<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular2 playground</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bulma CSS Framework -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.0.23/css/bulma.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Font Awesome Animation -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.8/font-awesome-animation.min.css">
<!-- Animate.CSS library -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<!-- Angular Polyfill for Optimum View update and Reflect metadata -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.min.js"></script>
<!-- SystemJS module laoder -->
<script src="//cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
<!-- Typescript compiler -->
<script src="//cdnjs.cloudflare.com/ajax/libs/typescript/1.9.0/typescript.min.js"></script>
<!-- Configure SystemJS to use Typescript -->
<script src="config.js"></script>
<!-- Angular Specific RxJS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/Rx.min.js"></script>
<!-- Angular 2 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2.dev.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console))
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
html, body {
min-height: 100%;
margin: 0;
padding: 0;
background: #1F2124;
color: #FFF;
}
.page__header {
background: #383A3F;
}
.page__header--item {
color: #F6B352;
}
### Angular2 Starter Plunker - Typescript - Beta 0
A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, pipes, and DI usage.
- Includes Bulma, FontAwesome (animation)
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 AppComponent from './app.component'
bootstrap(AppComponent, [])
.catch(err => console.error(err))
//our root app component
import {Component} from 'angular2/core'
@Component({
selector: 'my-app',
providers: [],
template: `
<header class="header page__header">
<div class="container">
<a class="header-item is-desktop">
<h2 class="title is-2 is-text-centered is-fullwidth page__header--item">
{{ title }}
</h2>
</a>
</div>
</header>
`,
directives: [],
})
export default class AppComponent {
title = 'Hello Angular 2'
}