Setting up Angular Version 2 -Tutorial Savvy

AngularJS

Angular version 2.0 is the next big release from Google’s team. A lot of things are changed compared to Angular version 1.
The Angular version 1 was developed keeping Web Designer in mind while Angular version 2 is focused on Web Developers.
In this demo, “We will learn installing Angular version 2.0 and with a simple example”.
For setting up Angular2 we need to have TSD,Typescript Compiler,JSPM system@0.16.js,traceur-runtime.js, angular2.dev.js.
The overall process of developing code in Angular2 are demonstrated in following diagram.

We need to install TSD package manager for typescript modules. We can find more information on TSD is from following link.

https://www.npmjs.com/package/tsd

TSD can be installed using npm install tsd –g command.The following screenshot shows the terminal with TSD installation.

TSD can be initialized by using tsd init command.This will generate tsd.json and typing/tsd.d.ts file.The following screenshot shows the terminal with tsd initialization.

Now we have to install Typescript compiler and watcher using npm install –g typescript@^1.5.0-beta command.The following screenshot shows the terminal with Typescript compiler installation.

Now We have to install angular2 dts file using tsd query angular2 –action install --save command.The following screenshot shows the terminal with angular2.d.ts installation.

Now We have to create a typescript file name my-components.ts file where we will write code for creating Angualr2 components.In the top of the my-components.ts file we have to include the following line of code.

/// <reference path="typings/angular2/angular2.d.ts" />

The content of the my-components.ts file are as follows.

/// <reference path="typings/angular2/angular2.d.ts" />

import {Component, View, bootstrap} from 'angular2/angular2';

@Component({
    selector: 'welcome'
})
@View({
    template: '<h1>Welcome {{ name }}</h1>'
})
class WelcomeComponent {
    name: string;
    constructor() {
        this.name = 'Sandeep';
    }
}
bootstrap(WelcomeComponent);

The typescript compiler and watcher can be started using tsc –watch –m commonjs –t es5 –emitDecoratorMetadata my-component.ts command in terminal.The following screenshot shows the typescript watcher getting started.

The tsc compiler-watcher will generate my-component.js file.
Now the index.html file which includes the system.js to load my-components.js file and traceur runtime environment to run ES6 code in browser environment using angular2.dev.js library.The code content of index.html file are as follows.

<html>
<head>
    <title>Angular 2 Demo</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.22/angular2.dev.js"></script>
</head>
<body>
    <welcome></welcome>
    <script>System.import("my-components");</script>
</body>
</html>