Learn ASP.NET MVC Using Angular 5

Introduction

In this article, we will learn how to integrate Angular 5 with ASP.NET MVC and simple data binding using Visual Studio.

What is Angular?

Angular is a powerful front-end JavaScript framework and it is called superscript. Google actively develops this framework. It allows you to build beautiful and flexible user interfaces.

Why use Angular 5?

Angular 5 is mainly introduced for faster, lighter & easier use. Several new features have been added for easy development with Progressive Web Apps & additional compatibility to material design.

Key features

  • Build Optimizer
  • Angular Universal API & DOM
  • Improved Compiler and Typescript
  • Router Hooks
  • Number, Date & currency pipes update

You might want some clarification on “Why we want to use Angular in ASP.NET MVC”.

Please visit: https://www.c-sharpcorner.com/article/learn-basics-of-mvc-using-angularjs/

What are components?

Angular components are the basic building blocks of Angular Apps. A component decorator  includes properties that allow you to define the template, file, CSS, and many more.

ASP.NET

Create ASP.NET MVC Project

Open Visual Studio 2017 and go to File >New > select New Project.

ASP.NET

Enter the application name and choose the project path. One more popup asks you to select the empty application and check the MVC. Then after finishing up, our project is ready to play.

ASP.NET

It will be a visible basic structure of MVC file.

ASP.NET

Right-click the project name and add a new Controller like AppController.

ASP.NET

Add a new View for Appcontroller >Index

ASP.NET

Now, it generates _Layout.cshtml & Bootstrap Content folder automatically.

ASP.NET

Download the Angular setup file from the Angular website and copy this files (tslint.json & Package.json) from setup to paste into the Project folder.

ASP.NET

Right-click the project name and add one new folder like “ClientApp”. Then, copy the files from “src” folder and paste into “ClientApp” folder.

ASP.NET

Follow the dependencies and overwrite from package.json. Then, right-click the file and click "Restore Packages".

  1. "dependencies": {  
  2.     "@angular/animations""^5.2.0",  
  3.     "@angular/common""^5.2.0",  
  4.     "@angular/compiler""^5.2.0",  
  5.     "@angular/core""^5.2.0",  
  6.     "@angular/forms""^5.2.0",  
  7.     "@angular/http""^5.2.0",  
  8.     "@angular/platform-browser""^5.2.0",  
  9.     "@angular/platform-browser-dynamic""^5.2.0",  
  10.     "@angular/router""^5.2.0",  
  11.     "core-js""^2.4.1",  
  12.     "rxjs""^5.5.6",  
  13.     "zone.js""^0.8.19",  
  14.     "angular-in-memory-web-api""~0.3.0",  
  15.     "systemjs""0.19.40"  
  16.   }  

Change the path name from system.js to config.js.

  1. /** 
  2.  * System configuration for Angular samples 
  3.  * Adjust as necessary for your application needs. 
  4.  */  
  5. (function (global) {  
  6.   System.config({  
  7.     paths: {  
  8.       // paths serve as alias  
  9.       'npm:''node_modules/'  
  10.     },  
  11.     // map tells the System loader where to look for things  
  12.     map: {  
  13.       // our app is within the app folder  
  14.         'app''CientApp/app',  
  15.   
  16.       // angular bundles  
  17.       '@angular/core''npm:@angular/core/bundles/core.umd.js',  
  18.       '@angular/common''npm:@angular/common/bundles/common.umd.js',  
  19.       '@angular/compiler''npm:@angular/compiler/bundles/compiler.umd.js',  
  20.       '@angular/platform-browser''npm:@angular/platform-browser/bundles/platform-browser.umd.js',  
  21.       '@angular/platform-browser-dynamic''npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',  
  22.       '@angular/http''npm:@angular/http/bundles/http.umd.js',  
  23.       '@angular/router''npm:@angular/router/bundles/router.umd.js',  
  24.       '@angular/forms''npm:@angular/forms/bundles/forms.umd.js',  
  25.   
  26.       // other libraries  
  27.       'rxjs':                      'npm:rxjs',  
  28.       'angular-in-memory-web-api''npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'  
  29.     },  
  30.     // packages tells the System loader how to load when no filename and/or no extension  
  31.     packages: {  
  32.       app: {  
  33.         defaultExtension: 'js',  
  34.         meta: {  
  35.           './*.js': {  
  36.               loader: 'CientApp/systemjs-angular-loader.js'  
  37.           }  
  38.         }  
  39.       },  
  40.       rxjs: {  
  41.         defaultExtension: 'js'  
  42.       }  
  43.     }  
  44.   });  
  45. })(this);  

Copy and paste the below script path to _Layout.cshtml page.

  1. <base href="/">  
  2.     <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />  
  3.     <link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" />  
  4.     <script src="~/Scripts/modernizr-2.6.2.js"></script>  
  5.   
  6.   
  7.     <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
  8.     <script src="~/Scripts/bootstrap.min.js"></script>  
  9.   
  10.     <!-- Polyfill(s) for older browsers -->  
  11.     <script src="~/node_modules/core-js/client/shim.min.js"></script>  
  12.     <script src="~/node_modules/zone.js/dist/zone.js"></script>  
  13.     <script src="~/node_modules/systemjs/dist/system.src.js"></script>  
  14.     <script src="~/CientApp/systemjs.config.js"></script>  
  15.     <script>  
  16.         System.import('/CientApp/main.js').catch(function (err) { console.error(err); });  
  17.     </script>  

Import the Angular Forms to app.module.ts file.

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

Write something in Angular component with binding the “name” to HTML element.

  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'my-app',  
  5.   templateUrl:'./app.component.html'  
  6. })  
  7. export class AppComponent  { name = 'Welcome to C# Corner'; }  

Use the <my-app> component element on index.cshtml View.

  1. <div class="container-fluid">  
  2.     <my-app>Loading AppComponent content here ...</my-app>  
  3. </div>  

Now, your application is ready to play. Press F5 on your keyboard. You will see the output from browser

Output

Loading Angular content

ASP.NET

Two-way Binding is working

ASP.NET

Download source code from GitHub.

Conclusion

In this article, we learned how to integrate Angular 5 with ASP.NET MVC.

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now