integrating angular with asp.net core restful services...asp.net core web api database data layer...

33
Integrating Angular with ASP.NET Core RESTful Services Dan Wahlin

Upload: others

Post on 03-May-2020

50 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Integrating Angular with ASP.NET Core

RESTful Services

Dan Wahlin

Page 2: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Dan Wahlin

https://blog.codewithdan.com

@DanWahlin

Page 3: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Get the Content:

http://codewithdan.me/angular-aspnet-core

Page 4: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Agenda

• The Big Picture• Creating a Web API Project• Angular Services• Injecting Services into Components

Page 5: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

ASP.NET Core Web API

Database

Data Layer

HTML (Razor) JSON

The Big Picture

Page 6: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

ASP.NET Core and Web API

Cross Platform Middleware Controller

Routing DependencyInjection Fast

Page 7: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

ASP.NET Core Controllers

ASP.NET Core

ActionResult(HTML)

ActionResult(JSON)

Controller

Page 8: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Creating a Web API Project

Page 9: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Creating a Web API Project in Visual Studio

Page 10: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Creating a Web API Project on Mac1. npm install -g yo generator-aspnet2. yo aspnet

Page 11: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Creating a Controller

ASP.NET MVC and Web API controller classes both derive from Controller:

[Route("api/[controller]")]public class CustomersController : Controller{

}

CustomersController.cs

Page 12: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Defining Injectables

Configure dependency injection in Startup.cs

public void ConfigureServices(IServiceCollection services){

//Configure an injectable object services.AddScoped<ICustomersRepository, CustomersRepository>();

...}

Startup.cs

Instance created per request

Page 13: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Using Dependency Injection

Objects configured in Startup.cs ConfigureServices() can be injected:

[Route("api/[controller]")]public class CustomersServiceController : Controller{ ICustomersRepository _repo;

public CustomersServiceController(ICustomersRepository repo) { _repo = repo; }

}

CustomersController.cs

Instance injected at runtime

Page 14: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Adding an Action and RouteWeb API actions can return a custom type or ActionResult

[Route("api/[controller]")]public class CustomersController : Controller{

ICustomersRepository _repo;

[HttpGet("{id}")] public async Task<ActionResult> Get(int id) { var customer = await _repo.GetCustomerAsync(id); if (customer == null) { return NotFound("No customer found!"); } return Ok(customer); }}

CustomersController.cs

Async action

Page 15: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Angular Services

Page 16: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Template ComponentCode

ServiceDirectives/Components

Component

ModulesRoutes

App Module (@NgModule)

Angular - The Big Picture

Page 17: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

How Do You Integrate Angular Into an ASP.NET Core Project?• Use an Angular/ASP.NET Core Seed Project

• Use the dotnet CLI:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

• Use the Angular CLI

ng new [project_name] -sd wwwroot -dir .

Page 18: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Services are reusable classes that handle business rules, calculations, Ajax calls, etc.

data.service.ts

import { Injectable } from '@angular/core';import { Http } from '@angular/http';

@Injectable()export class DataService { constructor(private http: Http) { }}

Angular Services

Injected at runtime

Supports injectables

Page 19: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Angular Async Operations• Services that perform asynchronous operations can use

Promises or Observables

• Promise:• An operation that hasn't completed yet, but is expected in the future• Used with async/deferred operations• Can be hooked to a callback

• Observable • An object that can be “subscribed” to by other objects• Can return multiple values over time – an async data stream• Event based

Page 20: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Observables versus Promises

Page 21: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Component

promise

function

Service

GET functionmakes Ajax call

success callback

Promises in Action

Page 22: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Component

subscribe

Service

1 or more itemsreturned

subscribe callback

Observables in Action

Page 23: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

RESTful services can be called using Http

data.service.tsimport { Http } from '@angular/http';import { Observable } from 'rxjs/Rx';import 'rxjs/add/operator/map;import 'rxjs/add/operator/catch';

@Injectable()export class DataService { constructor(private http: Http) { }

getCustomers() : Observable<ICustomer[]> { return this.http.get('api/customers') .map((response: Response) => response.json()) .catch(this.handleError); }}

Using Http to Call RESTful Services

Map response tocustomers

Page 24: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Create a promise by calling toPromise()

data.service.tsimport { Http } from '@angular/http';import 'rxjs/add/operator/toPromise';import 'rxjs/add/operator/catch';

@Injectable()export class DataService { constructor(private http: Http) { }

getCustomers() : Promise<ICustomer[]> { return this.http.get('api/customers') .toPromise() .then((response: Response) => response.json()) .catch(this.handleError); }}

Http and Promises

Convert to Promise

Page 25: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Injecting Services into Components

Page 26: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Template ComponentCode

ServiceDirectives/Components

Component

ModulesRoutes

App Module (@NgModule)

Angular - The Big Picture

Page 27: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Template ComponentCode

ServiceDirectives/Components

Angular - The Big Picture

Component

App Module (@NgModule)

Page 28: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

● Services can be injected when a provider has been defined in a component or in an @NgModule

import { DataService } from './shared/data.service';

@NgModule({ imports: [ BrowserModule, HttpModule ], declarations: [ AppComponent, CustomersComponent ], providers: [ DataService ], bootstrap: [ AppComponent ]})export class AppModule { }

Defining a Service Provider

app.module.ts

Page 29: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Services are "provided" to components

customers.component.tsimport { DataService } from '../shared/data.service';@Component({ ...})export class CustomersComponent implements OnInit { customers: Customer[]; constructor(private dataService: DataService) { } ngOnInit() { this.dataService.getCustomers() .subscribe((customers: Customer[]) => { this.customers = customers; }); }}

Injecting a Service into a Component

Page 30: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Angular and ASP.NET Core

https://github.com/DanWahlin/Angular-ASPNET-Core-Seed https://github.com/DanWahlin/AspNetCorePostgreSQLDockerApp

https://github.com/DanWahlin/Angular-ASPNET-Core-CustomersServicehttps://github.com/DanWahlin/ASPNETCore-Sync-Async-EF

Angular Projects:

http://codewithdan.me/angular-10-projects

Page 31: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Thanks for Coming!

Dan Wahlin@DanWahlin

Wahlin Consulting

Page 32: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Get the Content:

http://codewithdan.me/angular-aspnet-core

Page 33: Integrating Angular with ASP.NET Core RESTful Services...ASP.NET Core Web API Database Data Layer HTML (Razor) JSON The Big Picture

Angular, Node, TypeScript, JavaScript , C#, ASP.NET Core, Docker & more at your company or online!

https://codewithdan.com

Developer Training