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
No comments:
Post a Comment