Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

How to connect AngularJS to servers

12 480 vues

Publié le

In this short tutorial, we are going to see how AngularJS communicates with various back-ends using a general purpose $http service for issuing XMLHttpRequest (XHR) and JSONP calls, as well as the $resource service to easily target RESTful endpoints.

All examples code is available on GitHub: https://github.com/carlos-/ajs-connectserver

Publié dans : Technologie
  • Identifiez-vous pour voir les commentaires

How to connect AngularJS to servers

  1. 1. Connect AngularJS to Servers Examples on GitHub
  2. 2. agenda - Making XHR requests - Accessing to REST API - Overcoming to CORS
  4. 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. 5. Configuring request l Add some authorization headers l Setting cache l Transforming the request or response
  6. 6. Dedicated methods One method for each type of XHRequest
  7. 7. GET vs POST methods Request data from a specified resource Submit data to be processed to a specified resource
  8. 8. Example POSTMAN $http
  9. 9. Chained promises Using promises $http calls can be chained Only if resolve Any promise error
  11. 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. 12. Declaration in factory Calling the injected $resource function Careful with ':' Custom methods
  13. 13. Benefits of ngResource - Simplified code (encapsulation) - No callbacks (unless wanted) - Unit tests with ngResource - Custom methods
  14. 14. Example $resource
  15. 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
  17. 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. 18. Allow all origin Modify server so it can be access by all origins.
  19. 19. Example Modify Server Access-Control-Allow-Origin: *
  20. 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. 21. Example JSONP
  22. 22. JSONP limitations - Only GET HTTP Request - Error handling is problematic - Security threads - Modify my NodeJS to accept JSONP
  23. 23. MANY THANKS http://about.me/Carlos_Morales https://github.com/carlos-/ajs-connectserver