Nov 1

Written by: Michael Washington
11/1/2016 3:58 PM 

Note: This tutorial is part of a series of articles that create a complete Angular 2 application using OData 4 and ASP.NET 4:

1. Hello World! in Angular 2 using Visual Studio 2015 and ASP.NET 4 (this article)
2. Implement ASP.NET 4 MVC Application Security in Angular 2 Using OData 4
3. Tutorial: Creating An Angular 2 CRUD Application Using MVC 5 and OData 4
4. Tutorial: An End-To-End Angular 2 Application Using MVC 5 and OData 4

You can create applications in Angular 2 using Visual Studio 2015 running ASP.NET 4.

(Note: the following directions mostly follow the directions on the Angular site)

Step 1 – Visual Studio 2015 Update 3 (or higher)

Ensure you have Visual Studio 2015 Update 3 (or higher).

You can download the free Visual Studio 2015 Community Edition from:
https://www.visualstudio.com/downloads/download-visual-studio-vs

Step 2 – Install TypeScript 2.0 (or higher)

Install TypeScript 2.0 (or higher) for Visual Studio 2015 from here: https://www.typescriptlang.org/#download-links.

Step 3 – Install Node.Js and NPM

Install Node.js and the Node Package Manager (NPM) from here:

https://nodejs.org/en/download/

Step 4 – Configure Visual Studio

To avoid problems, we need to configure Visual Studio to use the global external web tools (such as the Node Package Manager).

Open Visual Studio.

Open Options.

In the Options dialog, select External Web Tools.

Move the $(PATH) entry above any $(DevEnvDir) or $(VSINSTALLDIR) entries.

Click OK.

Restart Visual Studio (for this change to take effect).

Step 5 – Create The Project

In Visual Studio, select File, then New, then Project.

Create a ASP.NET Web Application (.NET Framework) project.

Create a MVC project.

After the project is created and opens, in the Solution Explorer, right-click on the Solution node and select Rebuild Solution.

Step 6 – Download the Angular QuickStart files

Download the Angular Quickstart files from:

https://github.com/angular/quickstart/archive/2.4.0.zip (note they are constantly updating this project so get the 2.4.0 release that is known to work with this tutorial)

Step 7 – Add the Angular QuickStart Files

Unzip the Angular Quickstart files into a directory.

Select all the files, and copy all the files…

… and paste them into the directory that the Visual Studio project is in.

Do this using the Windows file manager not inside Visual Studio.

Step 8 – Add the Angular QuickStart Files to the Project

In Visual Studio, in the Solution Explorer, click on the Project node (not the Solution node).

Click the Show All Files button.

Right-click on the following folders and files and select Include In Project:

• app folder (answer No if asked to search for TypeScript Typings)
• styles.css
• package.json
• tsconfig.json

Click the Show All Files button again to hide the remaining files.

We now need to bring in the other Angular files using the Node Package Manager (NPM).

Right-click on the package.json file and select Restore Packages.

(If you do not see this option, try closing and re-opening Visual Studio, or if you have the Visual Studio Node.js tools installed, uninstall them. You can also use the node command line)

Wait until the packages have been installed (it may take a few minutes).

Rebuild the Solution.

Step 9 – Create the Hello World! Application

Open the file at: Views/Shared/_Layout.cshtml and add the following code to the Head section:

 

    <!-- Angular2 Code -->
    <base href="~/">
    <link rel="stylesheet" href="~/styles.css">
    <!-- Polyfill(s) for older browsers -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
    <script src="~/node_modules/core-js/client/shim.min.js"></script>
    <script src="~/node_modules/zone.js/dist/zone.js"></script>
    <script src="~/node_modules/reflect-metadata/Reflect.js"></script>
    <script src="~/node_modules/systemjs/dist/system.src.js"></script>
    <script src="~/systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
    <!-- Angular2 Code -->

 

Open the file at: Views/Home/Index.cshtml and replace all the code with the following code:

 

@{
    ViewBag.Title = "Home Page";
}
<div class="jumbotron">
    <h1>Angular 2 QuickStart</h1>
</div>
<div class="row">
    <div class="col-md-4">
        <!-- Angular2 Code -->
        <my-app>Loading...</my-app>
        <!-- Angular2 Code -->
    </div>
</div>

 

Open the file at: app/app.component.ts and replace all the code with the following code:

 

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
                <h1>Hello World!</h1>
                <h2>{{DynamicValue}}</h2>
              `
})
export class AppComponent {
    DynamicValue: string =
    "Running on IIS with ASP.NET 4.5 in Visual Studio 2015";
}

 

Run the project.

The application will display.

Links (LightSwitch Help Website)

Implement ASP.NET 4 MVC Application Security in Angular 2 Using OData 4

Tutorial: Creating An Angular 2 CRUD Application Using MVC 5 and OData 4

Links

Angular 2 Visual Studio 2015 QuickStart

Download Visual Studio 2015 Community Edition (Free)

Resources to Learn Angular 2

Angular 2: Getting Started (Pluralsight – Paid)

Introduction to Angular 2.0 (Microsoft Virtual Academy – Free)

Download

The project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

You must have Visual Studio 2015 Update 3 (or higher) and TypeScript 2.0 (or higher) installed to run the code.