Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to connect AngularJS to servers

12,413 views

Published on

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

Published in: Technology
  • Sex in your area is here: ❤❤❤ http://bit.ly/39mQKz3 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/39mQKz3 ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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
  3. 3. MAKING XHR REQUESTS
  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
  10. 10. ACCESS TO REST API
  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
  16. 16. OVERCOMING CORS
  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

×