rest easy with angularjs - ng-grid crud example
DESCRIPTION
In this presentation Backand discusses how to build an ng-grid solution using a real REST API to perform CRUD operations easily and seamlessly.TRANSCRIPT
10/5/2014 1www.backand.com
REST Easy with AngularJS
ng-grid CRUD EXAMPLE
Relly Rivlin – Co-founder and VP R&[email protected]
www.backand.com
Agenda
•First…REST overview
•And then, Angular core services
•What you’ll get at the end, CRUD with ng-grid
www.backand.com
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
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
www.backand.com
Verbs
Resource
GETread
POSTcreate
PUTupdate
DELETE
/carReturns a list of cars
Create a new car
Bulk update of cars
Delete all cars
/car/711Returns a specific car
Method not allowed (405)
Updates a specific car
Deletes a specific car
www.backand.com
HeadersEXAMPLE DESCRIPTION HEADER FIELD
NAMEAccept: text/plain Content-Types that are acceptable for the response Accept
Accept-Charset: utf-8 Character sets that are acceptable Accept-Charset
Accept-Encoding: gzip, deflate List of acceptable encodings Accept-Encoding
Accept-Language: en-CA List of acceptable human languages for response Accept-Language
Cookie: $Version=1; Skin=new; an HTTP cookie previously sent by the server with Set-Cookie Cookie
Content-Length: 348 The length of the request body in octets (8-bit bytes) Content-Length
Content-MD5: Q2hlY2sgSW50ZWdyaXR5IQ==A Base64-encoded binary MD5 sum of the content of the request body
Content-MD5
Content-Type: application/x-www-form-urlencodedThe MIME type of the body of the request (used with POST and PUT requests)
Content-Type
Date: Tue, 15 Nov 1994 08:12:31 GMT The date and time that the message was sent Date
oauth_token="ad180jjd733klru7" Authentication credentials for HTTP authentication Authorization
WWW-Authenticate: OAuth realm="http://sp.example.test/"
Indicates the authentication scheme that should be used to access the requested entity
WWW-Authenticate
www.backand.com
Response
• The HTTP response is usually JSON
• Status/Errors
• CORS, JSONP
www.backand.com
Status/Errors
Entire Collection (e.g. /car) Specific Item (e.g. /car/{id})HTTP Verb
200 (OK), list of customersUse 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
405 (Not Allowed) POST
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
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
www.backand.com
Angular Key Services for REST
• $http and $resource‹ Ajax calls
• $q ‹ Async progress
www.backand.com
$http and $resource
• In this presentation we use $http• Key differences
‹ $resource provides additional abstraction level‹ URI template‹ Function names ‹ Parameters declaration
• $resource example
www.backand.com
Angular Service with $resourceList service (filter, sort, paging) Item service (CRUD)
www.backand.com
$resource Usage
www.backand.com
$q
•Monitor asynchronous progress
• Promise
www.backand.com
Prerequisite for the CRUD Demo
• 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
www.backand.com
ng-grid CRUD with REST
• Authentication
• Read
• Create & Update
•Delete
www.backand.com
Authentication
•Get Oauth2 token• Add it to all the request headers•Using the $q promise
www.backand.com
CRUD - ReadPrepare $http functions Authenticate then read and
set the data into the controller scope
www.backand.com
CRUD – Create and UpdatePrepare $http functions In the ngGridEventEndCellEdit,
prepare the JSON. If new row Create otherwise Update.
www.backand.com
CRUD – Delete
Prepare $http functions Go through all the selected rows and delete them by ID
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