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

2. 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

3. 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

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

5. 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()

6. 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

7. 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

8. 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

9. 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
Then this class can be injection into the constructor of a component
The ContactService class is injected into the ContactListComponent

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

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

12. https://github.com/carolynlschroed er/WebAPIWithAngular
Resources
er/WebAPIWithAngular