Sunday, April 26, 2015

Angular 2 Hello World using latest alpha

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