SHASHANGKA SHEKHAR'S BLOG

Hi, I am Shashangka Shekhar, Working with Microsoft Technologies. This is my personal blog where I share some of my experiences.

ASP.NET Core PART-3

In our previous post we have overview .NET Core 1.0 with MVC & dependency Injection in .Net Core 1.0 empty template. In this post we are going to add Angular2 to our application.

ANGULAR2

Now we know how to install .Net Core, Enable MVC, Including .Net libraries, know about different json files, and also know how to run task & manage package in client side dependencies.

Our main purpose of this part is integrating AngularJS2 in our application. So let’s get started.

Open existing application with visual Studio 2015. We will follow those listed steps below.

  1. Update package.json
  2. Update gulp.json
  3. Update Startup.cs file for serving static files.
  4. Add tsConfig.json for typescript.
  5. Add bootstrap & component file for AngularJS2
  6. Modify _layout.cshtml to include references
  7. Change index page

This is all we have to do now.

First let’s just add packages

core_1

As you can see there are two different type object, one is dependencies that used for production purpose & other one is devDependencies for development related, Like gulp is to run different task.

In dependencies section we have added AngularJS2 with updated version. We can see others dependencies are also listed.

  • Es6-shim : is a library, provides compatibility on old environment.
  • Rxjs : provide more modular file structure in a variety of formats.
  • SystemJS : enables System.import TypeScript files directly.

Click save, it will restore automatically.

core_2

Now let’s add a gulp configuration file to run task. Click Add > New Item > Client-Side then select gulp json file to include.

Modify the gulp config file

core_4

Run task by reload > right click > Run

core_5

Files copied successfully to wwwroot folder.

core_6

Let’s modify startup file

core_7

This will serve the static files on request.

TypeScript:

core_8

  • noImplicitAny : Raise error on expressions and declarations with an implied ‘any’ type.
  • noEmitOnError : Do not emit outputs if any errors were reported.
  • Target : Specify ECMAScript target version: ‘es3’ (default), ‘es5’, or ‘es6’.
  • experimentalDecorators : Enables experimental support for ES7 decorators.

Get more details on Compiler option here.

Bootstrapping

core_9

Component: imports the Component function from Angular 2 library, use of import, appcomponent class can be imported from other component.

core_10

As you can see the both file in app folder need to reference in the implementation pages.

 core_11

MVC View:

core_12

Index page

core_13

Finally the welcome message is appear.

core_14

Source Code: I’ve uploaded the full source code to download/clone @github, Hope this will help 🙂

Post a comment