You are here:   Blog
Register   |  Login

 

Nov 1

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

image

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)

image

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)

image

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

image

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).

image

Open Visual Studio.

image

Open Options.

image

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

image

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

image

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

image

Create a MVC project.

image

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

image

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

image

Unzip the Angular Quickstart files into a directory.

Select all the files, and copy all the files…

image

… 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

image

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

Click the Show All Files button.

image

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

image

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

image

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)

image

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

image

Rebuild the Solution.

Step 9 – Create the Hello World! Application

image

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 -->

 

image

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>

 

image

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";
}

 

image

Run the project.

image

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.

3 comment(s) so far...


Gravatar

Re: Hello World! in Angular 2 using Visual Studio 2015 and ASP.NET 4

(econnreset) If when using NodeJs and you get a "econnreset" error, you can do this:

npm config set registry http://registry.npmjs.org/

See:
http://stackoverflow.com/questions/18419144/npm-not-working-read-econnreset

By Michael Washington on   11/29/2016 1:01 PM
Gravatar

Re: Hello World! in Angular 2 using Visual Studio 2015 and ASP.NET 4

Very nice tutorial,

possible to do one for setting up ASP.NET 4 and Angular 4?
please also include publishing the project to IIS.

thanks!

By mrekoj on   6/9/2017 11:11 AM
Gravatar

Re: Hello World! in Angular 2 using Visual Studio 2015 and ASP.NET 4

@mrekoj - See this link for Angular 4: http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/4306/Upgrading-JavaScriptServices-and-PrimeNG-From-Angular-2-to-Angular-4.aspx - See this link for publishing: https://github.com/aspnet/JavaScriptServices/issues/337

By Michael Washington on   6/9/2017 11:13 AM
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation