In this presentation Backand discusses how to build an ng-grid solution using a real REST API to perform CRUD operations easily and seamlessly

1. REST Easy with AngularJS
ng-grid CRUD EXAMPLE
Relly Rivlin – Co-founder and VP R&D
relly@backand.com
10/5/2014 1 www.backand.com

2. www.backand.com
Agenda
• First…REST overview
• And then, Angular core services
• What you’ll get at the end, CRUD with ng-grid

3. www.backand.com
REST Overview
• What is REST
‹ Representational state transfer
‹ General architecture
− Stateless
− Uniform interface
− Client server
• What is RESTFUL
‹ Implementation over HTTP for web services
‹ Simple object driven vs. action driven API
• Request and Response examples

4. www.backand.com
Request
• URI routing part:
{[version]}/api/{object|class|collection|table}/{[id]}
‹ /1/api/car/711
‹ /1/api/car?doors=4
• Querystring is usually for filtering, sorting and paging
• HTTP verbs for CRUD
• Headers

5. www.backand.com
Verbs
Resource GET
read
POST
create
PUT
update
DELETE
/car
Returns a list
of cars
Create a new car Bulk update of cars Delete all cars
/car/711
Returns a
specific car
Method not
allowed (405)
Updates a specific
car
Deletes a
specific car

6. HEADER FIELD
NAME
Accept Content-Types that are acceptable for the response Accept: text/plain
www.backand.com
Headers
DESCRIPTION EXAMPLE
Accept-Charset Character sets that are acceptable Accept-Charset: utf-8
Accept-Encoding List of acceptable encodings Accept-Encoding: gzip, deflate
Accept-Language List of acceptable human languages for response Accept-Language: en-CA
Cookie an HTTP cookie previously sent by the server with Set-Cookie Cookie: $Version=1; Skin=new;
Content-Length The length of the request body in octets (8-bit bytes) Content-Length: 348
Content-MD5 A Base64-encoded binary MD5 sum of the content of the request body Content-MD5: Q2hlY2sgSW50ZWdyaXR5IQ==
Content-Type The MIME type of the body of the request (used with POST and PUT requests) Content-Type: application/x-www-form-urlencoded
Date The date and time that the message was sent Date: Tue, 15 Nov 1994 08:12:31 GMT
Authorization Authentication credentials for HTTP authentication oauth_token="ad180jjd733klru7"
WWW-Authenticate: OAuth realm="http://sp.example.test/"
Indicates the authentication scheme that should be used to access the
requested entity
WWW-Authenticate

7. www.backand.com
Response
• The HTTP response is usually JSON
• Status/Errors
• CORS, JSONP

8. www.backand.com
Status/Errors
HTTP Verb Specific Item (e.g. /car/{id}) Entire Collection (e.g. /car)
200 (OK), list of customers
Use pagination, sorting and filtering to navigate big
lists
200 (OK), single customer
404 (Not Found), if ID not found or invalid
GET
404 (Not Found), unless you want to update/replace
every resource in the entire collection
200 (OK) or 204 (No Content)
404 (Not Found), if ID not found or invalid
PUT
201 (Created), 'Location' header with link to:
/customers/{id} containing new ID
POST 405 (Not Allowed)
404 (Not Found), unless you want to delete the whole
collection—not often desirable
200 (OK)
404 (Not Found), if ID not found or invalid
DELETE

9. www.backand.com
CORS, JSONP
• CORS (cross-origin resource sharing)
‹ Recommended if no need to support older browser versions
‹ Server side only, by providing sets of headers supported by browsers
‹ Enables secure cloud services for organizations
• JSONP
‹ Server and client side
‹ P stands for padding
‹ Pad the JSON with a function to overcome restrictions and remove it later

10. Angular Key Services for REST
www.backand.com
• $http and $resource
‹ Ajax calls
• $q
‹ Async progress

11. $http and $resource
• In this presentation we use $http
• Key differences
‹ $resource provides additional abstraction level
‹ URI template
‹ Function names
‹ Parameters declaration
www.backand.com
• $resource example

12. Angular Service with $resource
List service (filter, sort, paging) Item service (CRUD)
www.backand.com

13. www.backand.com
$resource Usage

14. www.backand.com
$q
• Monitor asynchronous progress
• Promise

15. Prerequisite for the CRUD Demo
www.backand.com
• Angular
• ng-grid
• Backand REST API
‹ Gives you security, web hooks, business rules, hosting and logging
‹ Enables you to focus entirely on the client side

16. ng-grid CRUD with REST
www.backand.com
• Authentication
• Read
• Create & Update
• Delete

17. www.backand.com
Authentication
• Get Oauth2 token
• Add it to all the request
headers
• Using the $q promise

18. www.backand.com
CRUD - Read
Prepare $http functions Authenticate then read and set the
data into the controller scope

19. CRUD – Create and Update
Prepare $http functions In the ngGridEventEndCellEdit, prepare the
JSON. If new row Create otherwise Update.
www.backand.com

20. www.backand.com
CRUD – Delete
Prepare $http functions Go through all the selected rows and
delete them by ID

21. www.backand.com
Thank You!
Github: https://www.backand.com/get-started
Blog: http://blog.backand.com/ng-grid-real-rest/
Plunker: http://plnkr.co/edit/6jdCzZ?p=preview
Directives: http://blog.backand.com/documentation
Me: relly@backand.com