integrating angular with asp.net core restful services...asp.net core web api database data layer...
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/1.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/2.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/3.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/4.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/5.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/6.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/7.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/8.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/9.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/10.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/11.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/12.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/13.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/14.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/15.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/16.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/17.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/18.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/19.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/20.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/21.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/22.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/23.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/24.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/25.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/26.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/27.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/28.jpg)
● 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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/29.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/30.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/31.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/32.jpg)
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](https://reader030.vdocuments.site/reader030/viewer/2022040204/5eaecdbe334d2603525a2fec/html5/thumbnails/33.jpg)
Angular, Node, TypeScript, JavaScript , C#, ASP.NET Core, Docker & more at your company or online!
https://codewithdan.com
Developer Training