This document discusses various ways to connect AngularJS applications to servers including making XHR requests with the $http service, accessing REST APIs with the $resource service, and overcoming CORS issues. The $http service allows making asynchronous HTTP requests and transforming requests and responses. The $resource service provides a higher-level interface to interact with RESTful APIs without using $http directly. CORS issues can be addressed by configuring the server to allow all origins or using JSONP for cross-domain requests, though it only supports GET and has other limitations. Examples are provided for $http, $resource, modifying servers for CORS, and using JSONP.

1. Bantayso solutions
Connect AngularJS to Servers
Examples on GitHub

2. Bantayso solutions
Agenda
- Making XHR requests
- Accessing to REST API
- Overcoming to CORS

3. Bantayso solutions
MAKING XHR REQUESTS

4. Bantayso solutions
$http
Core Angular service that facilitates communication with the remote HTTP servers via the browser's
XMLHttpRequest object or via JSONP.
Success asynchr

5. Bantayso solutions
Coniguring request
l Add some authorization headers
l Setting cache
l Transforming the request or response

6. Bantayso solutions
Dedicated methods
One method for each type of XHRequest

7. Bantayso solutions
GET vs POST methods
Request data from a speciied resource
Submit data to be processed to a speciied resource

8. Bantayso solutions
Example
POSTMAN $http

9. Bantayso solutions
Chained promises
Using promises $http calls can be chained
Only if resolve
Any promise error

10. Bantayso solutions
ACCESS TO REST API

11. Bantayso solutions
$resource service
A factory which creates a resource object that lets you interact with RESTful server-side data sources.
The returned resource object has action methods which provide high-level behaviors without the need to interact with the low level $http service.

12. Bantayso solutions
Declaration in factory
Calling the injected $resource function
Careful with ':'
Custom methods

13. Bantayso solutions
Beneits of ngResource
- Simpliied code (encapsulation)
- No callbacks (unless wanted)
- Unit tests with ngResource
- Custom methods

14. Bantayso solutions
Example
$resource

15. Bantayso solutions
Problems of ngResource
- Any custom behavior expect (big) extra efort
- Once you get the data you can not do much, so you should deliver it in its inal state
- Does not return promises (directly)
- Building custom URLs is not easy
Check Restangular
https://github.com/mgonto/restangular
More to come in Angular 2.0

16. Bantayso solutions
OVERCOMING CORS

17. Bantayso solutions
Overcoming same-origin policy
Cross-origin Resource Sharing (CORS) allows to get a resource from another domain, forbidden by browsers.
- External resources
- Diferent domain or port
Solutions
1. Modify server
2. JSONP

18. Bantayso solutions
Allow all origin
Modify server so it can be access by all origins.

19. Bantayso solutions
Example
Modify Server
Access-Control-Allow-Origin: *

20. Bantayso solutions
JSONP
JSONP = JSON with padding
Request data from a server in a diferent domain, taking advantage of the fact that browsers do not enforce the same- origin policy on <script> tags.
<script type=”text/javascript” src=”...../api/?callback=angular.callbacks._1”>
</script>

21. Bantayso solutions
Example
JSONP

22. Bantayso solutions
JSONP limitations
- Only GET HTTP Request
- Error handling is problematic
- Security threads
- Modify my NodeJS to accept JSONP

23. Bantayso solutions
MANY
THANKS
http://bantayso.com