I previously blogged on how to create a Hello World
application using Angular 2 Alpha 14. Since then there were some significant
changes and that blog is not valid any more.
In this blog I will provide the latest Hello World code
using a Component and a View.
Here is the View code
<html>
<head>
<title>Angular 2 Hello World</title>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.20/angular2.js"></script>
</head>
<body>
<my-app></my-app>
<script>
System.config({
traceurOptions: {
annotations: true,
memberVariables: true,
types: true
},
paths: {
'*': '*.js',
'angular2/*': 'angular2/*'
}
});
System.import('app');
</script>
</body>
</html>
Here is the Component code
import {Component, View, bootstrap} from 'angular2/angular2';
//
Annotation section
@Component({
selector: 'my-app'
})
@View({
template: `<h1>Hello {{ name }}</h1>`
})
//
Component controller
class App {
constructor() {
this.name = 'World';
}
}
bootstrap(App);
I created a plnkr with the above code.
You can also download the Visual Studio 2015 and Visual
Studio 2013 solutions from my GitHub site
Visual Studio 2013 version
Visual Studio 2015 version
