Learn ASP.NET Core Using Angular 2

Introduction

In this article, we will learn ASP.NET Core Using Angular 2 in Visual studio 2017

  • Why should we use Angular 2?
  • Why should we use ASP.NET Core?
  • What should we know about?
  • How do we use Angular 2 in ASP.NET Core?

Why should we use Angular 2?

ASP.NET Core

Angular 2 is making the most of the new browser developments for creating better applications and Angular 2 is a complete rewrite of the Angular 1 framework. Angular 2 can build applications that live on

  • Web
  • Mobile
  • Desktop

    ASP.NET Core

Each application consists of components. So component is a logical boundary of functionality for the application. It needs to have layered services, which are used to share the functionality. It will share the following

  • Template
  • Class
  • Metadata

Why should we use ASP.NET Core?

ASP.NET Core

Asp.net is a new open source and cross-platform framework for building modern cloud-based application, such as web apps, IoT apps and mobile backends.it was architected to provide an optimized development framework for apps that are deployed to the cloud.

You develop and run ASP.Net Core apps on

  • Windows
  • Mac
  • Linux

    ASP.NET Core

ASP.Net Core is designed to integrate seamlessly with a variety of client-side framework, such as

  • AngularJS
  • KnockoutJS
  • Bootstrap

What should we know about?

Before you start Angular 2 & ASP.NET Core let's just refresh these things
ASP.NET Core
TypeScript

Angular 2 writes only in TS files. Typescript is a superset of java script developed and maintain by Microsoft. Typescript files are convert source code into another source language. This is one of the main features of most of browser supporting language of ECMA Script & developer can use Data type for variables.

Grunt JS Task Runner

Grunt is Java script task runner which can be used a command line tool for java script object & it is a task manager written on top of node JS. Grunt includes built in tasks that expand the functionality of your plugin and script & you can automate anything with less effort.

Angular 2

Angular 2 is different from Angular 1 but if you know Angular 1 it's a little bit easier to understand the code. If you want to know about Angular 1 and its advantages please visit my previous article.

ASP.NET Core MVC

You can create well-factored and testable web apps that follow the model-view-controller (MVC) pattern. Building Web APIs & Restful apps that reach a broad range of clients, including browser & Mobile

Features

  • Build Web UI & Web API
  • Support modern client side framework
  • Cloud-ready environment
  • Build dependency injection
  • Using NuGet Packages
  • Open source
  • Cross platform support (Windows, Mac, Linux)

How to use angular 2 in ASP.NET Core?

If you need the below software for installation, click on the above & download it.

Prerequisites

Open Visual Studio 2017

ASP.NET Core

Go to New menu >Click New & project. Now it will open New Project Window

ASP.NET Core

You can select ASP.NET Core Web Application on Framework 4.6. Enter the name of project in “Solution name” textbox then click ok button.

ASP.NET Core

Select web application & click “OK” button

ASP.NET Core

After scaffolds solution explorer looks like above picture, then if you click on PLAY button or IIS Express, you can see the base application of ASP.NET Core.

ASP.NET Core

Now application is ready for configuration, so let’s start.

Right click above the project Add> New item

ASP.NET Core

It will open a popup as add new items. You can find “npm Configuration File” for ASP.NET Core.

ASP.NET Core

After adding “package.json “clean the inside code and copy & paste the below given code.

JSON

  1. {  
  2.   "version""1.0.0",  
  3.   "name""asp.net",  
  4.   "private"true,  
  5.   "devDependencies": {  
  6.     "@angular/common""^2.3.1",  
  7.     "@angular/compiler""^2.3.1",  
  8.     "@angular/core""^2.3.1",  
  9.     "@angular/forms""^2.3.1",  
  10.     "@angular/http""^2.3.1",  
  11.     "@angular/platform-browser""^2.3.1",  
  12.     "@angular/platform-browser-dynamic""^2.3.1",  
  13.     "@angular/router""^3.3.1",  
  14.     "es6-shim""^0.35.0",  
  15.     "core-js""^2.4.1",  
  16.     "reflect-metadata""^0.1.3",  
  17.     "rxjs""5.0.0-beta.12",  
  18.     "systemjs""0.19.27",  
  19.     "zone.js""^0.6.23",  
  20.     "angular2-in-memory-web-api""0.0.20",  
  21.     "body-parser""1.14.1",  
  22.     "bootstrap""3.3.5",  
  23.     "jquery""2.1.4"  
  24.   },  
  25.   "dependencies": {  
  26.     "del""2.1.0",  
  27.     "gulp""3.9.0",  
  28.     "gulp-typescript""^2.13.4",  
  29.     "gulp-watch""4.3.5",  
  30.     "merge""1.2.0",  
  31.     "typescript""^2.0.2",  
  32.     "typings""^1.3.3",  
  33.     "rimraf""^2.5.4"  
  34.   },  
  35.   "scripts": {  
  36.     "postinstall""typings install"  
  37.   }  
  38. }    

Again you can find “TypeScript JSON Configuration File” for ASP.NET Core.

ASP.NET Core

After adding “tsconfig.json “clean the inside code and copy & paste the below given code

JSON

  1. {  
  2.   "compileOnSave"true,  
  3.   "compilerOptions": {  
  4.   
  5.     "target""es5",  
  6.     "module""commonjs",  
  7.     "moduleResolution""node",  
  8.     "sourceMap"true,  
  9.     "emitDecoratorMetadata"true,  
  10.     "experimentalDecorators"true,  
  11.     "removeComments"false,  
  12.     "noImplicitAny"true,  
  13.     "suppressImplicitAnyIndexErrors"true  
  14.   },  
  15.   "exclude": [  
  16.     "node_modules",  
  17.     "wwwroot"  
  18.   ]  
  19. }  

Right click the project Add> New item>find JSON File & rename it as typings.json

ASP.NET Core

Add the below code in typings.json.

JSON

  1. {  
  2.   "globalDependencies": {  
  3.     "core-js""registry:dt/core-js#0.9.0+20170324193834",  
  4.     "node""registry:dt/node#6.0.0+20161110151007"  
  5.   }  
  6. }  

So the above three files are more important for Angular 2 configurations. Then right click on package.json & click to Restore Packages. Just confirm all the files are installed in NPM

ASP.NET Core

Right click the project & select Edit your project .csproj file.

ASP.NET Core

Add the below commend in this file

  1. <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>  

 

Open the package manager console and Run the those lines

ASP.NET Core

You can create gulpfile.js using java script then cope & paste the given below code.

Java Script

  1. var gulp = require('gulp');    
  2.     
  3. gulp.task('thirdparty'function ()    
  4. {    
  5.     gulp.src('./node_modules/core-js/**/*.js')    
  6.         .pipe(gulp.dest('./wwwroot/node_modules/core-js'));    
  7.     
  8.     gulp.src('./node_modules/@angular/**/*.js')    
  9.         .pipe(gulp.dest('./wwwroot/node_modules/@angular'));    
  10.     
  11.     gulp.src('./node_modules/zone.js/**/*.js')    
  12.         .pipe(gulp.dest('./wwwroot/node_modules/zone.js'));    
  13.     
  14.     gulp.src('./node_modules/systemjs/**/*.js')    
  15.         .pipe(gulp.dest('./wwwroot/node_modules/systemjs'));    
  16.     
  17.     gulp.src('./node_modules/reflect-metadata/**/*.js')    
  18.         .pipe(gulp.dest('./wwwroot/node_modules/reflect-metadata'));    
  19.     
  20.     gulp.src('./node_modules/rxjs/**/*.js')    
  21.         .pipe(gulp.dest('./wwwroot/node_modules/rxjs'));    
  22.     
  23. });    
  24. gulp.task('copy'function ()    
  25. {    
  26.     gulp.src('./app/**/*.*')    
  27.         .pipe(gulp.dest('./wwwroot/app'));    
  28. });    
  29.     
  30. gulp.task('watch'function ()    
  31. {    
  32.     gulp.watch('./app/**/*.*', ['copy']);    
  33. });  

Right click on this gulpfile.js & open task Runner Explorer

ASP.NET Core

Refresh the bottom screen then tasks will be loaded & right click on it and run it.

ASP.NET Core

Right click on “wwwroot” & create java script file & rename it as systemjs.config.js & put inside below the code.

Java Script

  1. (function (global) {  
  2.     // map tells the System loader where to look for things    
  3.     var map = {  
  4.         'app''app'// 'dist',    
  5.         '@angular''node_modules/@angular',  
  6.         'rxjs''node_modules/rxjs'  
  7.     };  
  8.     // packages tells the System loader how to load when no filename and/or no extension    
  9.     var packages = {  
  10.         'app': { main: 'main.js', defaultExtension: 'js' },  
  11.         'rxjs': { defaultExtension: 'js' }  
  12.     };  
  13.     var ngPackageNames = [  
  14.         'common',  
  15.         'compiler',  
  16.         'core',  
  17.         'forms',  
  18.         'http',  
  19.         'platform-browser',  
  20.         'platform-browser-dynamic',  
  21.         'router'  
  22.     ];  
  23.     // Individual files (~300 requests):    
  24.     function packIndex(pkgName) {  
  25.         packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };  
  26.     }  
  27.     // Bundled (~40 requests):    
  28.     function packUmd(pkgName) {  
  29.         packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };  
  30.     }  
  31.     // Most environments should use UMD; some (Karma) need the individual index files    
  32.     var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;  
  33.     // Add package entries for angular packages    
  34.     ngPackageNames.forEach(setPackageConfig);  
  35.     var config = {  
  36.         map: map,  
  37.         packages: packages  
  38.     };  
  39.     System.config(config);  
  40. })(this);   

Just copy & paste the tsconfig.json file. You are almost over the configuration part. So let’s start writing Angular 2 code. Create new folder inside the “wwwroot” and create TS files

  • component.ts
  • module.ts
  • ts

After creating the above files, write code like below.

Type Script

app.component.ts

  1. import { Component } from '@angular/core'    
  2. @Component({    
  3.     selector: 'app-loader',    
  4.     template: `    
  5. <div>     
  6. <div>    
  7.  <h4>Welcome to Angular with ASP.NET Core and Visual Studio 2017</h4>  
  8. </div></div>  
  9. `    
  10. })    
  11. export class AppComponent{}   

app.module.ts

  1. import { NgModule } from "@angular/core";    
  2. import { BrowserModule } from "@angular/platform-browser";    
  3. import { AppComponent } from "../app/app.component";    
  4. @NgModule({    
  5.     imports: [BrowserModule],    
  6.     declarations: [AppComponent],    
  7.     bootstrap: [AppComponent]    
  8. })    
  9. export class AppModule { }   

main.ts 

  1. import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";  
  2. import { AppModule } from "./app.module";  
  3. platformBrowserDynamic().bootstrapModule(AppModule);   

Open _Layout.cshtml in views>Shared follow the below code inside the head tag. 

  1. <script src="../node_modules/core-js/client/shim.min.js"></script>  
  2.     <script src="../node_modules/zone.js/dist/zone.js"></script>  
  3.     <script src="../node_modules/reflect-metadata/Reflect.js"></script>  
  4.     <script src="../node_modules/systemjs/dist/system.src.js"></script>  
  5.     <script src="../systemjs.config.js"></script>  
  6.   
  7.     <script>  
  8.   
  9.         System.import('app')  
  10.             .then(  
  11.             function () { console.log('started application'); },  
  12.             function (err) { console.log('error starting application'); console.log(err); });  
  13.     </script>   

Open index.cshtml in Views>Home write this line.

  1. <app-loader>Loading...</app-loader>  

 

Now you can run the application & see our first angular 2 page in ASP.NET Core.

Output 1

ASP.NET Core

Output 2

ASP.NET Core

Download Source Here

Conclusion

In this article, we have learned about  ASP.NET Core Using Angular 2. If you have any queries, please tell me through the comments section, because your comments are very valuable.

Happy Coding!...