Please Sign up or sign in to vote.

Introduction

Recently Angular team released Angular 2 beta (2.0.0-beta.0) version. Compare to previous alpha versions in this release they perform again many changes but great thing is that now they are confident that most developers can be successful building large applications using Angular 2 .

Background

We can get more articles, recordings for investigate Angular2 with TypeScript. Yet, since we need to utilize Angular2 with VS2015. For this situation the things will be somewhat distinctive, So we will talk about here how to setup Angular 2.0 in Visual Studio and compose an exceptionally fundamental example application.

Source code

https://www.dropbox.com/s/2tg4rte0vmjnmnz/Angular2Demo.zip?dl=0

Using the code

For implementation we just need to follow following steps.

Step 1 – Create a VS (Visual Studio) ASP.NET Web Application

Open Visual Studio 2015 and create an Empty ASP.NET Web Application by just follow below instructions.

File --> New --> Project --> Web --> select a ASP.NET Web Application template. --> OK --> choose ASP.NET 5 Preview template(Empty)

Now, the solution explorer looks like this.

Now open project.json file an add below code inside dependencies

" dependencies" : { " Microsoft.AspNet.Server.IIS" : " 1.0.0-beta6" , " Microsoft.AspNet.Server.WebListener" : " 1.0.0-beta6" , " Microsoft.AspNet.StaticFiles" : " 1.0.0-beta6" },

Now open startup.cs file and replace

public void Configure(IApplicationBuilder app) { app.Run(async (context) => { await context.Response.WriteAsync( " Hello World!" ); }); }

With following code

public void Configure(IApplicationBuilder app) { app.UseDefaultFiles(); app.UseStaticFiles(); }

Now right click wwwroot and add new item à client side à select html page and create index.html page.

Open index.html page and write 'Hello' then run your basic .net application.

Step 2 – Add NPM configuration file

As a .Net developer you may be think that, why we are not using NuGet package?

Answer is here, NuGet is great for server side libraries but when we required client side css and js library then NPM is more rich then Nuget. NPM will provide us client-side runtime assets like jQuery, Bootstrap and AngularJS.

Open application Add new item window then select NPM configuration file by just follow below instructions and leaving the default name 'package.json' as it is.

Now right click on Application name a client side --> add NPM configuration file by name “package.json”.

Now open pakage.json file and replace existing code with following code:

{ " name" : " angular2-quickstart" , " version" : " 1.0.0" , " scripts" : { " tsc" : " tsc" , " tsc:w" : " tsc -w" , " lite" : " lite-server" , " start" : " concurrent \"npm run tsc:w\" \"npm run lite\" " }, " license" : " ISC" , " dependencies" : { " angular2" : " 2.0.0-beta.1" , " 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" }, " devDependencies" : { " concurrently" : " ^1.0.0" , " lite-server" : " ^1.3.2" , " typescript" : " ^1.7.5" } }

Step 3 – Add TypeScript configuration file

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript and it offers classes, modules, and interfaces to help you build robust components. It also has generics and lambdas.

The one of the main reason for go with TypeScript is that, it is actually from Microsoft, which means the Angular 2 is give more advantage with TypeScript and .Net.

But still you can use classic js with Angular2 but I would prefer TypeScript with Angular2.

Now right click on Application name à client side --> add TypeScript JSON Configuration File by name “tsconfig.json”.

Now open “tsconfig.json” file and replace existing code with following code.

{ " compilerOptions" : { " target" : " es5" , " module" : " commonjs" , " moduleResolution" : " node" , " sourceMap" : true , " emitDecoratorMetadata" : true , " experimentalDecorators" : true , " removeComments" : false , " noImplicitAny" : false , " outDir" : " wwwroot/app/" }, " exclude" : [ " node_modules" ] }

Note: One imperative thing you have to recall is that by define following instruction we specify js file path. In our case it is required because inside wwwroot files only include in published code.

"outDir": "wwwroot/app/" // this path define js file path

Step 4 – Add TypeScript files

Now right click on Application name and new folder by name “scripts”.

Then after right click scripts folder à client side --> add TypeScript File by name “app.component.ts”.

Open app.component.ts file and paste following code:

import {Component} from ' angular2/core' ; @Component({ selector: ' my-app' , template : ' <h1>Angular 2 Sample Application</h1>' }) export class AppComponent { }

Note: The above ‘export’ statement informed to TypeScript is that this is a module with contain a public class AppComponent and this class is accessible by application other modules.

Now right click scripts folder à client side --> add TypeScript File by name “boot.ts”.

Open boot.ts file and add following code:

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

Note: The above "import" articulation educated to TypeScript is that by utilizing this code particular component/module can import from determine way.

Step 5 – Include reference files

Open index.html file and paste following code:

<html> <head> <title>Angular 2 Application</title> <!-- 1 . Load libraries --> <script src= " https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js" ></script> <script src= " https://code.angularjs.org/tools/system.js" ></script> <script src= " https://code.angularjs.org/tools/typescript.js" ></script> <script src= " https://code.angularjs.org/2.0.0-beta.0/Rx.js" ></script> <script src= " https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js" ></script> <!-- 2 . Configure SystemJS --> <script> System.config({ transpiler: ' typescript' , typescriptOptions: { emitDecoratorMetadata: true }, packages: { ' app' : {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>

We just completed our first Angular2 sample application with TypeScript and VS2015 :)

Conclusion

In this article, I've given you a look at how Visual Studio and TypeScript will have the capacity to help you for develop Angular 2 application.

Here I am covered only the basic and practical concepts, but if you want to read Angular 2 theory then there are many Angular 2 theory resources available in the community.