Web API with Angular 2 Front End Carolyn Schroeder, August 15, 2017

What is a RESTFul Web API? Lookups should use GET requests. PUT, POST, and DELETE requests Lookups should use GET requests. PUT, POST, and DELETE requests What is a RESTFul Web API? The term API stands for ‘Application Programming Interface’. These are online web services which client apps can consume REST stands for ‘Representational State Transfer’ and it is an architectural pattern for creating an API that uses HTTP as its underlying communication method RESTFul APIs use the verbs Get, Post, Put and Delete

RESTFul Urls Action Http Verb Relative Url Get All Contacts Get /api/contacts Get Single Contact /api/contacts/id Add Contact Post New contact is sent in POST body Update Contact Put or Patch Updated contact is sent in POST body Delete Contact Delete

Status Codes Status Codes are used to describe the response 200 –OK 201 – Created 204 – No Content 404 – Not Found 500 – Internal Server Error

Enable CORS CORS is a mechanism that essentially lets a server say I allow cross domain calls from the domains I specify When browsers make cross domain calls, they request CORS headers to decide whether the target server allows access to the source domain Here the source domain is the Angular dev server and the target server is the Web API dev server To do this start with registering CORS functionality in ConfigureServices() of Startup.cs You can apply the policy globally to every request in the application by call app.useCors() in the Configure() method of Startup UseCors() has to be called before UseMvc()

Structure of an Angular 2 Application Root Module Component 1 Component 2 Component 3 The AppModule is the Root Module It is bootstrapped by main.ts

An Angular Components: Template Class containing properties and methods Metadata defined with a decorator Components must be declared in the Root module We have two components, AppComponent and ContactListComponent

They require a class to deserialze the data returned from the Web API Angular Services They require a class to deserialze the data returned from the Web API A life cycle hook can be used to fill the data in the html view The life cycle hook OnInit is implemented in ContactListComponent to obtain the data from ContactService

Then this class can be injection into the constructor of a component Dependency Injection To inject a dependency a class needs to be marked with the decorator @Injectable Then this class can be injection into the constructor of a component The ContactService class is injected into the ContactListComponent

Pipes A pipe takes data as input and transforms it to the desired output You can define custom pipes A custom pipe needs the decorator @Pipe The transform method is essential to a pipe The ContactFilterPipe is used to filter data in the ContactListComponent template

Angular 2 Starter Project Right click on package.json and select “Restore Packages” This installs the node_modules folder

https://github.com/carolynlschroed er/WebAPIWithAngular Resources https://github.com/carolynlschroed er/WebAPIWithAngular http://schroederconsulting.business