How to connect AngularJS to servers
4 likes12,655 views
This document discusses how to connect AngularJS to servers, focusing on making XHR requests, accessing REST APIs, and overcoming CORS issues. It highlights the use of the $http core service for communication and the $resource service for simplified interactions with RESTful data sources. Additionally, it covers JSONP as a workaround for CORS limitations and discusses benefits and drawbacks of using ngResource.
How to connect AngularJS to servers
- 1. Connect AngularJS to Servers Examples on GitHub
- 2. agenda - Making XHR requests - Accessing to REST API - Overcoming to CORS
- 4. $http Core Angular service that facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP. Success asynchr
- 5. Configuring request l Add some authorization headers l Setting cache l Transforming the request or response
- 6. Dedicated methods One method for each type of XHRequest
- 7. GET vs POST methods Request data from a specified resource Submit data to be processed to a specified resource
- 9. Chained promises Using promises $http calls can be chained Only if resolve Any promise error
- 10. ACCESS TO REST API
- 11. $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. Declaration in factory Calling the injected $resource function Careful with ':' Custom methods
- 13. Benefits of ngResource - Simplified code (encapsulation) - No callbacks (unless wanted) - Unit tests with ngResource - Custom methods
- 15. Problems of ngResource - Any custom behavior expect (big) extra effort - Once you get the data you can not do much, so you should deliver it in its final 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. OVERCOMING CORS
- 17. Overcoming same-origin policy Cross-origin Resource Sharing (CORS) allows to get a resource from another domain, forbidden by browsers. - External resources - Different domain or port Solutions 1. Modify server 2. JSONP
- 18. Allow all origin Modify server so it can be access by all origins.
- 19. Example Modify Server Access-Control-Allow-Origin: *
- 20. JSONP JSONP = JSON with padding Request data from a server in a different 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. Example JSONP
- 22. JSONP limitations - Only GET HTTP Request - Error handling is problematic - Security threads - Modify my NodeJS to accept JSONP
- 23. MANY THANKS http://about.me/Carlos_Morales https://github.com/carlos-/ajs-connectserver