Angular 2 in Visual Studio 2015 with TypeScript

I have been following the developments occurring in Angular 2.0 world for a number of months.  Although the project is not even in alpha phase quite yet, I have been meaning to try to write a tiny sample project.  I wanted to see how version 2 is different from version 1, even in the simplest of concepts.  I did not want to make big demo, as I want to wait till at least beta.  So, in this post I will document the steps I took using Visual Studio 2015 and TypeScript to create tiny demo, that at a minimum using some data binding concepts for fields and functions.  So, here is my first Angular 2.0 demo.

I am using Visual Studio 2015.  I also need to install beta of TypeScript 1.5.

To start I simply created an empty web project.  Since this is a simple demo, I stayed away from web api and other data concepts.

image

Now, I just need to create a shell HTML page.  I added new index.html to the project.  In it, I just needed to import the latest versions of developer preview JavaScript libraries.

<!DOCTYPE html>
<html>
<head>
    <title>Angular 2</title>
	<meta charset="utf-8" />
</head>
<body>
    <my-app></my-app>
    <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.28/angular2.dev.js"></script>
</body>
</html>

You see two new libraries in addition to Angular 2.  First one, Traceur transpiler component, the in-browser version.  Second one systemjs, is a poly-fill that emulates module loader of ECMA 6 standard in ECMA 5 compatible browsers.  Since my demo will be transpiled to JS 5, I need this as well.  So, so far nothing special.

Now the goal of the sample project.  It will be a hell world type of application, taking user’s name and displaying hello message via a button click.

Now I need to pull in TypeScript definition file for Angular 2, angular2.d.ts.  To simplify this process, I am going to install TypeScript defintion manager, tsd.  In order to accomplish this, open up “Developer Command Prompt for VS2015.”  You will find the shortcut under Visual Studio 2015 menu in Windows.  Sine this prompt support node package manager.  To do so, just type the following to install tsd into global node location

npm install –g tsd 

Now, we need to pull main angular definition by typing the following at the same prompt.  However, before you do this, switch the directory to where your csproj file is located.  If you do not, you will need to manually copy .d.ts files around.  By default they are installed into typings folder.

tsd install angular2 es6-promise rx rx-lite

Besides Angular2, this installs its dependencies as well, total of 4 files will be installed.  Just include them in your project, and you are ready to write your first Angular 2 class.  Ad main.ts TypeScript file to your project.  You main get a prompt that says TypeScript needs to be configured for this project.  You also need to pull up property page for TypeScript and enable AMD modularity support.

image

 

Then add the following code to main.ts.

import {Component, View, bootstrap, formDirectives} from 'angular2/angular2';
@Component({
    selector: 'my-app'
})
@View({
    directives: [formDirectives],
    templateUrl:'mainForm.html'
})
class AppComponent {
    name: string;
    hello(): void {
        alert("hello, " + this.name);
    }
    constructor() {
        this.name = "John Doe";
    }
}
bootstrap(AppComponent);

This code is using annotations features of TypeScript 1.5, developed by Microsoft in coordination with Google.  My main class is called AppComponent.  It is decorated with two Angular 2 attributes.  First attribute specifies where my component will be injected – inside my-app tag.  If you scroll back up to the index.html, you will see this tag.  Second attribute specified the view definition for this class.  It says that I will require form directives for this view, and the view itself is located inside mainForm.html.

The class itself has one property and one method.  I am using those terms a bit loosely in relationship with JavaScript, but in TypeScript I tend to use class based nomenclature.  Now, try to compile your project to ensure it is properly configured. 

In the next step we need to create the mainForm.html view.

<h1>My first Angular 2 App</h1>
<div>
    Name: <input [(ng-model)]="name" />
</div>
<button (click)="hello()">Click</button>

You will notice different syntax, as compared to Angular 1.  I am using new ng-model syntax that indicates two-way data binding for my name property of the class above.  I am using slightly different event syntax for my button, indicating that when it is clicked, I need to call hello function on the same class above.  In the final step I need to bootstrap my class inside index.html, below my other JavaScript includes.

<body>
    <my-app></my-app>
    <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.28/angular2.dev.js"></script>
    <script>System.import('main');</script>
</body>

You see System.import call.  The module name, i.e. file name in my case is main, since TypeScript file is call main.ts, hence JavaScript generated file is called main.js.  Extension is assumed by SystemJS JavaScript library.

This is it, you are ready to run the app and type your name and click the button.

image

Enjoy.  You can download the same app here.