Integrating Angular with
ASP.NET Core
RESTful Services
Dan Wahlin
Dan Wahlin
https://blog.codewithdan.com
@DanWahlin
Get the Content:
http://codewithdan.me/angular-aspnet-core
Agenda
• The Big Picture
• Creating a Web API Project
• Angular Services
• Injecting Services into Components
The Big Picture
HTML (Razor) JSON
ASP.NET Core Web API
Data Layer
Database
ASP.NET Core and Web API
Cross
Middleware Controller
Platform
Dependency
Routing Fast
Injection
ASP.NET Core Controllers
ASP.NET Core
Controller
ActionResult ActionResult
(HTML) (JSON)
Creating a Web
API Project
Creating a Web API Project in Visual Studio
Creating a Web API Project on Mac
1. npm install -g yo generator-aspnet
2. yo aspnet
Creating a Controller
ASP.NET MVC and Web API controller classes both
derive from Controller:
CustomersController.cs
[Route("api/[controller]")]
public class CustomersController : Controller
{
}
Defining Injectables
Configure dependency injection in Startup.cs
Startup.cs
public void ConfigureServices(IServiceCollection services)
{
Instance created
per request
//Configure an injectable object
services.AddScoped<ICustomersRepository, CustomersRepository>();
...
}
Using Dependency Injection
Objects configured in Startup.cs ConfigureServices()
can be injected:
CustomersController.cs
[Route("api/[controller]")]
public class CustomersServiceController : Controller
{ Instance injected at
ICustomersRepository _repo; runtime
public CustomersServiceController(ICustomersRepository repo) {
_repo = repo;
}
}
Adding an Action and Route
Web API actions can return a custom type or ActionResult
CustomersController.cs
[Route("api/[controller]")]
public class CustomersController : Controller
{
ICustomersRepository _repo; Async action
[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);
}
}
Angular Services
Angular - The Big Picture
App Module (@NgModule)
Routes
Modules
Component
Component
Template
Code
Directives/
Service
Components
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 .
Angular Services
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() Supports injectables
export class DataService {
constructor(private http: Http) { }
} Injected at runtime
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
Observables versus Promises
Promises in Action
Component Service
function GET function
makes Ajax call
promise
success callback
Observables in Action
Component Service
subscribe 1 or more items
returned
subscribe callback
Using Http to Call RESTful Services
RESTful services can be called using Http
data.service.ts
import { 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);
} Map response to
} customers
Http and Promises
Create a promise by calling toPromise()
data.service.ts
import { 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())
Convert to Promise .catch(this.handleError);
}
}
Injecting Services
into Components
Angular - The Big Picture
App Module (@NgModule)
Routes
Modules
Component
Component
Template
Code
Directives/
Service
Components
Angular - The Big Picture
App Module (@NgModule)
Component
Component
Template
Code
Directives/
Service
Components
Defining a Service Provider
● Services can be injected when a provider has been defined in a
component or in an @NgModule
app.module.ts
import { DataService } from './shared/data.service';
@NgModule({
imports: [ BrowserModule, HttpModule ],
declarations: [ AppComponent, CustomersComponent ],
providers: [ DataService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Injecting a Service into a Component
Services are "provided" to components
customers.component.ts
import { 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;
});
}
}
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-CustomersService
https://github.com/DanWahlin/ASPNETCore-Sync-Async-EF
Angular Projects:
http://codewithdan.me/angular-10-projects
Thanks for Coming!
Dan Wahlin
@DanWahlin
Wahlin Consulting
Get the Content:
http://codewithdan.me/angular-aspnet-core
Developer Training
Angular, Node, TypeScript, JavaScript , C#, ASP.NET Core, Docker & more at
your company or online!
https://codewithdan.com
