Sunday, January 03, 2016

Angular2 and Visual Studio

Introduction

This article explains how to build an Angular2 Beta application using Visual Studio.

Background

Angular Team has released the beta version of Angular2. There are good tutorials on the Angular site. These tutorials are based on npm. However, if you are using Visual Studio as your IDE, you need to make some modifications.

Prerequisites

Download and install npm.
As VS 2015 has integrated npm via Task Runner Explorer, we will use this feature. If you have VS 2013, you need to install Task Runner Explorer.
Get the latest version of TypeScript.

Using the code

1 - Create a new project by selecting TypeScript => HTML Application with TypeScript



2 - You can delete app.css, app.ts and index.html


3 - We need to change the TypeScript compiler options. Since the interface does not cover all options, we need to change these options from the csproj file. Add the following lines after TypeScriptToolsVersion

<TypeScriptModuleKind>System</TypeScriptModuleKind>
<TypeScriptModuleResolution>node</TypeScriptModuleResolution>
<TypeScriptEmitDecoratorMetadata>true</TypeScriptEmitDecoratorMetadata>
<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
<TypeScriptNoImplicitAny>true</TypeScriptNoImplicitAny>

The final should be as below.


4 - Add the package.json to the root of the project.
       {
        "name": "angular2-quickstart",
        "version": "1.0.0",
        "license": "ISC",
        "dependencies": {
            "angular2": "2.0.0-beta.0",
            "systemjs": "0.19.6",
            "es6-promise": "^3.0.2",    
            "es6-shim": "^0.33.3",
            "reflect-metadata": "0.1.2",
            "rxjs": "5.0.0-beta.0",
            "zone.js": "0.5.10"
            }
        }
        
        
After adding package.json, Task Runner Explorer will download the modules under node_modules directory. Wait for the download to finish.

 
5 - Now we are ready to build and Angular2 Beta application. Create a directory called app. Create app.component.ts and boot.ts files under app directory and index.html to root as below.

app.component.ts

        import {Component} from 'angular2/core';
            interface Hero {
            id: number;
            name: string;
        }
        @Component({
            selector: 'my-app',
            template: `
            <h1>{{title}}</h1>
            <h2>{{hero.name}} details!</h2>
            <div><label>id: </label>{{hero.id}}</div>
            <div>
                <label>name: </label>
                <div><input [(ngModel)]="hero.name" placeholder="name"></div>
            </div>
            `
        })
        export class AppComponent {
            public title = 'Tour of Heroes';
            public hero: Hero = {
            id: 1,
            name: 'Windstorm'
            };
        }
        

boot.ts

            import {bootstrap} from 'angular2/platform/browser';
            import {AppComponent} from './app.component';
            bootstrap(AppComponent);
        

index.html

        <html>
        <head>
            <title>Angular 2 QuickStart</title>
            <script src="node_modules/es6-shim/es6-shim.js"></script>
            <!-- 1. Load libraries -->
            <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
            <script src="node_modules/systemjs/dist/system.src.js"></script>
            <script src="node_modules/rxjs/bundles/Rx.js"></script>
            <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
            <!-- 2. Configure SystemJS -->
            <script>
              System.config({
                packages: {
                  app: {
                    format: 'register',
                    defaultExtension: 'js'
                  }
                }
              });
              System.import('app/boot')
                    .then(null, console.error.bind(console));
            </script>
        </head>
        <!-- 3. Display the application -->
        <body>
            <my-app>Loading...</my-app>
        </body>
        </html>
        

6 Now run F5 and see the application running.

1 comments:

Dud71 said...

This was really helpful. Thanks İbrahim!