Angular 2 Final Part 2 : Setting up Angular 2 with Asp .Net Core

There are an number of ways to start an Angular project.
A few of  them are GitHub copy, AngularCli, yo.
Setting up Angular with Asp .Net Core is easy with yo aspnetcore-spa. yeoman or yo is a code generator.

For working with yo first node and npm (Node  Package Manager have to be installed.

Once npm is installed yo can be installed  with the command  
npm install -g yo. 
-g is used to install it globally.

Since yo is ready now generator for Asp .Net Core can be installed with the command
npm install -g generator-aspnet.

Now  it's possible to create different type of Asp .Net project like  Empty Web Application, Web Appllication Basic, Web Application (with Identity), etc.

Generator for Asp .Net Core Single Page Application can be installed by typing
npm install -g yo generator-aspnetcore-spa.

A new Angular project can be created with the comman
yo aspnetcore-spa.

This generator can be used to create not only Angular project but also Knockout, React, etc.

I am going with Angular 2. It will be prompting the Visual Studio Version, Whether you want Unit Testing the Project, the Project name, etc.

I am sticking on with Visual Studio 2015, with no Unit Testing.

Once the project is created you can open it in any editor or IDE. My preferred editor is Visual Studio Code.
By typing code . the project can be opened in Visual Studio Code.

Visual Studio Code terminal can be invoked with Ctrl+~.

Since this  is a  Asp .Net Core project it can be run with the command dotnet run.

The output can be seen by opening a browser and type http://localhost:5000 as mentioned in the output.

Angular : Part 1 Getting Started

Angular is a Single Page Application framework from Google.  Angular 2 was released on September 14,  2016 after two years of development.


Setting a local development environment requires installing node. 



With Plunker Getting Started with Angular 2 is very easy.

app.ts

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Shalvin'
  }
}

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

Component

The basic building block of Angular is a component. A component is a reusable piece of functionality like a Partial View in Asp .Net MVC or an User Control in Web Forms.


  A Component is a collection of TypeScript code, HTML Template and Directive. You can write components using ES5, ES6, TypeScript or Dart.  Typescript is the most preferred option. Angular 2 is developed using TypeScript. The TypeScript will get transpiled to ES5 so that browsers can understand.


The component stars with import  statements which imports the necessary modules from packages.  In this example we are using Component and NgModule from @angular.core package, and BrowserModule from @angular/platform-browser. Angular 2 is a framework which can be used to create Mobile application (Ionic 2), multi platform applications (Electron), etc. Here we are specifying that it is a browser application using BrowserModule.



NgModule is used to create  Module. Module  is a  unit of functionality. It is a collection of components directives, etc.


A Component Directive is like attributes in .Net. Here the selector property is given the name my-app. In the HML page we will be making use of this template using <my-app></my-app> tags.


template property is used to define the HTML. Alternatively templateUrl can be used used for specifying an HTML document containing the UI.


 Inside the class App I have defined a memory variable called name and assigned it a value 'Shalvin'. TypeScript supports types. I have defined name of type string. That name variable is used inside HTML using interpolation syntax, ie. enclosed within double curly brackets.


main.ts

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

main.ts is the  starting point of the application. It bootstraps AppModule, which in turn bootstraps App component.


index.html

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>angular2 playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

 

In the index.html page we are instantiating the template using <my-app></my-app> tags.




Property Binding


Property Binding enables binding property value in the component to DOM.

 template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
    Name <input type = "text" [value] = name/>
    
  `,

[] is the Property Binding syntax.  Here the name variable is bound to the value property of input. Likewise it is possible to bind to any any attributes of HTML elements like src of img, href of anchor, etc.
Plunker output.


Event Binding

Suppose you have a function in the component and you want to bind that to the click event of a button. This can be done using Event binding.  Enclose the event you want to bind to within ().

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
    <div>
    Name <input type ="text" [value]= name/>
     <div>
     <div>
      <input type ="button" value = "About Me" (click)="Hello()"/>
     </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Shalvin'
  }
  
  Hello()
  {
    alert('.Net and Angular Consultant and Trainer');
  }
}

Plunker output.


Two-way data binding

The data binding in Angular is unidirectional. Property Binding happens from component to view. Event Binding happens from view to component.

By merging both Property Binding syntax [] and Event Binding syntaxt () it is possible to have Two-way data binding.

For implementing two way data binding FormsModule of  @angular/forms package is required.

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms'

imports array

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

imports array of  AppModule is used to consolidate features belonging to
 different modules. So the FormsModule have to be added to import array.

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 *ngIf="name">{{name}} is specializing in {{specialization}}</h2>
    </div>
    <div>
    Name <input type ="text" [(ngModel)]= name/>
     <div>
     <div>
    Specialization <input type ="text" [(ngModel)]= specialization/>
     <div>
  `,
})
export class App {
  name:string;
  specialization:string;
}

Here the ngModel is enclosed within [()] and assigned the value of the component which makes it two-way data bindable. As the value are entered into input fields the values will be reflected at the top.

Plunker output