Part 2: Angular 2 + MVC ASP.NET using Visual Studio Code.

Now that our ASP.NET Visual Studio Code project is wired with Angular 2 and Typescript (see previous post), its time to write our cool “Hello World!” Angular 2 code.

For me, in order for you to write a simple SPA application using Angular 2, you just need the following: (very simple isn’t it! easy :))

  • HTML Landing Page
  • Angular 2 codes (wwwroot/app/*.ts)

To create an HTML Landing Page with ASP.NET you need to create a Controller and a View.  Below is the Controller named /Controller/SoftwareController.cs:

using Microsoft.AspNet.Mvc;

namespace rymage.Controllers
{
    public class SoftwareController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Then create a view /View/Software/Index.cshtml:

<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>

<!-- configure system loader first -->
<script>
    System.config({
        defaultJSExtensions: true,
        paths: {
            'angular2/*': 'node_modules/angular2/*',
            'rxjs/*': 'node_modules/rxjs/*'
        }
    });
</script>

<script src="https://code.angularjs.org/2.0.0-beta.7/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.7/angular2.dev.js"></script>

<script>
      System.import('app/boot')
            .then(null, console.error.bind(console));
</script>

<my-app>Loading...</my-app>

Notice that the file structure, naming and location of the two files follows ASP.NET MVC rules, the only difference is that the razor CSHTML file (View) contains wierd Javascript libraries and customised html tag <my-app>.  These modifications can be found in the Google Angular IO page.

Now its time for our Angular 2 codes!  All codes can be stored in your wwwroot directory.  In my case I created a sub directory wwwroot/app.  In this directory I will put in all my codes.

The first code is the boot.ts code, you can associate this code as your main() function for your Angular 2 application, which is called in your landing page (see the CSHTML above System.import code) and will run our appComponent.ts code.  See the code below:

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

The second code is the appComponent.ts code, this is my first application component. It will just modify the  CSHTML page and print “Hello World”.

import {Component} from 'angular2/core';
@Component({
    selector: 'my-app',
    template: '
Hello World
'
})
export class AppComponent { }

Take note that these codes are in Typescript (ts), you need to compile it to Javascript (js) by pressing “Command+Shift+B” or “Ctrl+Shift+B” for windows.  If it doesn’t compile please check the version and Typescript configuration as shown in my previous post.

Below is the screenshot of the project with all files created.

Screen Shot 2016-02-24 at 8.13.22 AM

Thats it!  To understand how it works let me give you the step by step flow when you execute the application:

  1. http://localhost:5000  – open the url
  2. http://localhost:5000/Software – call the controller->landing page
  3. “<script https…>” – Loads the Javascript libraries needed by Angular 2
  4. “System.import…” – Imports the boot.js file
  5. “bootstrap(…” – Imports the appComponent.js file to modify the customised tag <my-app>

After all the hassle, you should get this hello world output.

Screen Shot 2016-02-24 at 8.06.45 AM

And if you find this blog helpful, you can make the donation by clicking the Paypal button below.


					
Advertisements
About

Software developer living in the Philippines.

Posted in ASP.NET

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Author

Harold Glenn P. Minerva
Software Developer / Tech Enthusiast
Living in the Philippines

View Harold Glenn Minerva's profile on LinkedIn

Instagram

Software Engineer - Seasonal and Range Trading Software. Magenta Trader is a powerful stock market visualization software that increases your probability of trading success.

Software Architect and Founder - Easyfis.com is a multi-tenant cloud-based Software-as-a-Service (SaaS) business app that caters to micro, small and medium trading businesses.

CTO and Co-Founder - We give your company the leverage by providing innovative software solutions products such as Point-of-Sales (POS), Financial Information System (FMIS), Payroll and DTR (HRIS), and many more.

%d bloggers like this: