Using RESTFUL APIs in ANGULARJS

Using RESTful APIs in AngularJS

Presenter: Jyotirmaya Dehury, Mindfire SolutionsDate: 07/30/2014

1. REST Concepts.

2. CRUD(create, read, update, and delete) with REST.

3. Basics of AngularJS

4. Consuming RESTful APIs using ngResource module in AngularJS.

5. Demo App.

Agenda

Presenter: Jyotirmaya Dehury, Mindfire Solutions

REST ConceptsREST is a standard to be followed.Helps you to build an API that is efficient, easy to use and HIGHLY UNDERSTANDABLE.

RESOURCE-oriented model to expose their services.

Create a uniform interface by mapping HTTP methods to CRUD

CRUD = Create, Read, Update, Delete

HTTP methods = POST, GET, PUT, DELETE

Create = POSTRead = GETUpdate = PUTDelete = DELETE

Presenter: Jyotirmaya Dehury, Mindfire Solutions

REST ConceptsSo instead of API calls such as:

Create – POST: /user/newRead – GET: /user?id=1Update – POST: /user/updateDelete – GET: /user/delete?id=1

Simply:

Create – POST: /user (with the variables in the entity-body)Read – GET: /user/1Update – PUT: /user/1 (with the variables in the entity-body)Delete – DELETE: /user/1

Presenter: Jyotirmaya Dehury, Mindfire Solutions

REST Concepts

Consider the following:

POST: http:/test.com/userGET: http:/test.com/user/1PUT: http:/test.com/user/1DELETE: http:/test.com/user/1

POST, GET, PUT, DELETE are the methods

http:/test.com/user, http:/test.com/user/1 are URI’s

user/1 is a user, which is a resource

Understand Resources and REST URI

Presenter: Jyotirmaya Dehury, Mindfire Solutions

REST Concepts

Difference between a resource and a representation:

GET: http:/test.com/user/1 will return a Representation{"firstName":"John", "lastName":"Doe"}

Of the resource user:1.

A representation will have a format like JSON or XML.

A client application gets a REPRESENTATION of the resource using the REST URI

Presenter: Jyotirmaya Dehury, Mindfire Solutions

AngularJS

A great framework to develop SPA web-solutions.

An MVC framework.

A JavaScript framework to develop web applications.

Presenter: Jyotirmaya Dehury, Mindfire Solutions

AngularJS Angular Features

Presenter: Jyotirmaya Dehury, Mindfire Solutions

ServerAP

Is

AngularJS

Its a JavaScript object.Angular services help to build reusable business logic which can be shared and used across the app.

Angular Services

$http$resource$q$anchorScroll$cacheFactory$compile$parse$locale

$timeout$exceptionHandler$filter$cookieStore

$route$routeParams$location

● Built-In Services

Presenter: Jyotirmaya Dehury, Mindfire Solutions● Custom Services

AngularJS

The ngResource module provides interaction support with RESTful services via the $resource service.

ngResource

Installation

<script src=”angular.js”><script src=”angular-resource.js”>

Presenter: Jyotirmaya Dehury, Mindfire Solutions

AngularJS

Creates a resource object that lets you interact with RESTful server-side data sources.

$resource

$resource(url, [paramDefaults], [actions], options);

var User = $resource('/user/:userId', {userId:'@id'});var user = User.get({userId:123});// GET: /user/123

Presenter: Jyotirmaya Dehury, Mindfire Solutions

AngularJS

Creates a resource object that lets you interact with RESTful server-side data sources.

$resource

$resource(url, [paramDefaults], [actions], options);

{ 'get' : {method: 'GET' }, 'save' : {method: 'POST' }, 'query' : {method: 'GET' , isArray:true}, 'remove' : {method: 'DELETE' }, 'delete' : {method: 'DELETE' } };

Presenter: Jyotirmaya Dehury, Mindfire Solutions

Demo

Presenter: Jyotirmaya Dehury, Mindfire Solutions

Questions?

Presenter: Jyotirmaya Dehury, Mindfire Solutions

http://www.pluralsight.com/

https://docs.angularjs.org/api/ngResource/service/$resource

http://mark-kirby.co.uk/2013/creating-a-true-rest-api/

IBM – RESTful Web Services: The Basics

https://www.youtube.com/watch?v=QHIMygADPPc

References

Presenter: Jyotirmaya Dehury, Mindfire Solutions

Presenter: Jyotirmaya Dehury, Mindfire Solutions

Thank you

www.mindfiresolutions.com

https://www.facebook.com/MindfireSolutions

http://www.linkedin.com/company/mindfire-solutions

http://twitter.com/mindfires