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.

Create ASP.NET MVC Project

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

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.

It will be a visible basic structure of MVC file.

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

Add a new View for Appcontroller >Index

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

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.

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

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

"dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19",
    "angular-in-memory-web-api": "~0.3.0",
    "systemjs": "0.19.40"
  }

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

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
        'app': 'CientApp/app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
              loader: 'CientApp/systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

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

<base href="/">
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.6.2.js"></script>


    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>

    <!-- Polyfill(s) for older browsers -->
    <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/systemjs/dist/system.src.js"></script>
    <script src="~/CientApp/systemjs.config.js"></script>
    <script>
        System.import('/CientApp/main.js').catch(function (err) { console.error(err); });
    </script>

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [BrowserModule,
            FormsModule],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

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

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl:'./app.component.html'
})
export class AppComponent  { name = 'Welcome to C# Corner'; }

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

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

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

Output

Loading Angular content

Two-way Binding is working

Download source code from GitHub.

Conclusion

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