Integrating Angular with
[Link] Core
RESTful Services
Dan Wahlin
Dan Wahlin
[Link]
@DanWahlin
Get the Content:
[Link]
Agenda
• The Big Picture
• Creating a Web API Project
• Angular Services
• Injecting Services into Components
The Big Picture
HTML (Razor) JSON
[Link] Core Web API
Data Layer
Database
[Link] Core and Web API
Cross
Middleware Controller
Platform
Dependency
Routing Fast
Injection
[Link] Core Controllers
[Link] 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
[Link] MVC and Web API controller classes both
derive from Controller:
[Link]
[Route("api/[controller]")]
public class CustomersController : Controller
{
}
Defining Injectables
Configure dependency injection in [Link]
[Link]
public void ConfigureServices(IServiceCollection services)
{
Instance created
per request
//Configure an injectable object
[Link]<ICustomersRepository, CustomersRepository>();
...
}
Using Dependency Injection
Objects configured in [Link] ConfigureServices()
can be injected:
[Link]
[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
[Link]
[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
[Link] Core Project?
• Use an Angular/[Link] Core Seed Project
• Use the dotnet CLI:
dotnet new --install [Link]::*
• 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.
[Link]
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
[Link]
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 [Link]('api/customers')
.map((response: Response) => [Link]())
.catch([Link]);
} Map response to
} customers
Http and Promises
Create a promise by calling toPromise()
[Link]
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 [Link]('api/customers')
.toPromise()
.then((response: Response) => [Link]())
Convert to Promise .catch([Link]);
}
}
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
[Link]
import { DataService } from './shared/[Link]';
@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
[Link]
import { DataService } from '../shared/[Link]';
@Component({
...
})
export class CustomersComponent implements OnInit {
customers: Customer[];
constructor(private dataService: DataService) { }
ngOnInit() {
[Link]()
.subscribe((customers: Customer[]) => {
[Link] = customers;
});
}
}
Angular and [Link] Core
[Link]
[Link]
[Link]
[Link]
Angular Projects:
[Link]
Thanks for Coming!
Dan Wahlin
@DanWahlin
Wahlin Consulting
Get the Content:
[Link]
Developer Training
Angular, Node, TypeScript, JavaScript , C#, [Link] Core, Docker & more at
your company or online!
[Link]
