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.
$RESOURCE
VANCOUVER ANGULARJS – APRIL 2ND, 2014
ABOUT @SACHINKAGRAWAL
 I run EDP Software and we build a product called SchedulePro
 Relatively new to AngularJS. Just n...
GOALS FOR TODAY
 Use $resource for connecting to REST web services
 Discuss how to use $resource in a web application
S...
MY THOUGHTS ON COMMON EXAMPLES
 Most documentation is too simple
 Logic for using $http or $resource is built right into...
$RESOURCE INTRO
 Provides a really simple way to grab data from a REST endpoint
Standard methods for query, get, save, d...
ASYNCHRONOUS CALLS AND PROMISES
 Angular uses promises heavily in many of the built in APIs
 $q is a lightweight promise...
$HTTP VS. $RESOURCE
PROMISES VS. CALLBACKS
 $http uses promises as the design pattern for managing async
actions
 $resou...
CALLBACKS FOR SETTING RESULTS
 BAD – What many base examples show
No way of taking action when the async call completes....
ERROR HANDLING – SECOND CALLBACK
 http://stackoverflow.com/questions/20584367/how-to-handle-
resource-service-errors-in-a...
CREATING A LAYER OF ABSTRACTION
 Isolate - REST APIs may be out of your control (e.g. 3rd party).
Create a factory with ...
EXAMPLE
angular.module('sampleApp').factory('resourceAPI', ['$resource', function ($resource) {
var ResourceObject = $reso...
EXAMPLE PART II
Meanwhile.... In your controller
$scope.showSpinner = true;
resourceAPI.getTransformedValues().then(functi...
FUTURE STUFF TO INVESTIGATE/LEARN
 http interceptors
Retry Logic
Security Scenarios
 Response caching
Upcoming SlideShare
Loading in …5
×

Vancouver AngularJS using $resource in your application

4,135 views

Published on

AngularJS $resource is a great tool for quickly connecting to RESTful services. Unfortunately the docs and examples quickly lead you to bad design.

This presentation is a short set of design patterns for using the $resource service. It focuses on how to use promises and callbacks in your application for error handling, API isolation and extensibility.

I skip the details on the $resource syntax. The AngularJS docs do a great job there.

Published in: Software, Technology
  • Be the first to comment

Vancouver AngularJS using $resource in your application

  1. 1. $RESOURCE VANCOUVER ANGULARJS – APRIL 2ND, 2014
  2. 2. ABOUT @SACHINKAGRAWAL  I run EDP Software and we build a product called SchedulePro  Relatively new to AngularJS. Just now starting to use it in Production scenarios  Background 8 years as a Program Manager at Microsoft before EDP Software University of Waterloo alumni We’re hiring! http://www.edpsoftware.com/about-edp-software/careers/ Email: hr@edpsoftware.com
  3. 3. GOALS FOR TODAY  Use $resource for connecting to REST web services  Discuss how to use $resource in a web application Separate API details from application Where to put common tasks like data transforms  Get feedback from the group on what else could be done better!
  4. 4. MY THOUGHTS ON COMMON EXAMPLES  Most documentation is too simple  Logic for using $http or $resource is built right into a controller  Two big issues that I found REST API changes are not isolated No common place to handle async status
  5. 5. $RESOURCE INTRO  Provides a really simple way to grab data from a REST endpoint Standard methods for query, get, save, delete Easy to define urls, parameters, custom additions, etc. (see docs)  Super simple to get started (you should turn this into a factory) var ResourceObject = $resource("http://foo/Object/…"); var resultData = ResourceObject.query(); //The following call will be bound to the scope and then UI if rendered //UI will magically update when the request is complete $scope.foo = ResourceObject.query();
  6. 6. ASYNCHRONOUS CALLS AND PROMISES  Angular uses promises heavily in many of the built in APIs  $q is a lightweight promise implementation  Promises provide the ability to control and chain requests together.  NOTE: The results of $resource (or $http) are asynchronous. If your code expects data immediately after calling a query, you will have an empty result!!!  NOTE 2: Angular calls the digest loop after $http calls complete which is why the UI seems to magically get the data
  7. 7. $HTTP VS. $RESOURCE PROMISES VS. CALLBACKS  $http uses promises as the design pattern for managing async actions  $resource defaults to using a callback structure Allow you to access the promise exposed by $http  HELP Me Vangular!? Suggestions on which route to choose? I exposed the promise from $resource in my last example.
  8. 8. CALLBACKS FOR SETTING RESULTS  BAD – What many base examples show No way of taking action when the async call completes. Easy to start with but quickly limits your application  Good – Use the callback function to set variables on the scope $scope.foo = ResourceObject.query(); ResourceObject.query(function(results){ $scope.foo = results; //Do any other actions here…. });
  9. 9. ERROR HANDLING – SECOND CALLBACK  http://stackoverflow.com/questions/20584367/how-to-handle- resource-service-errors-in-angularjs Resource.query(function(data) { // success handler }, function(error) { // error handler });
  10. 10. CREATING A LAYER OF ABSTRACTION  Isolate - REST APIs may be out of your control (e.g. 3rd party). Create a factory with your own API  Simplify/Transform data Promises can be chained together The return result from one promise goes into the next as the incoming data
  11. 11. EXAMPLE angular.module('sampleApp').factory('resourceAPI', ['$resource', function ($resource) { var ResourceObject = $resource("http://foo/Object/…"); return { getTransformedValues: function () { return ResourceObject.query().$promise.then(function(data) { //Make whatever transforms are required //Underscore library is useful here data = .... //The returned data will be the result //when the promise resolves return data; }); }, otherFunctionsInAPI: function() {} }; } ]);
  12. 12. EXAMPLE PART II Meanwhile.... In your controller $scope.showSpinner = true; resourceAPI.getTransformedValues().then(function(data){ $scope.foo = data; return data; }, function(error){ //Perform whatever error handling you wish })[‘finally’](function(){ //Odd finally syntax is for IE8 compat $scope.showSpinner = false; });
  13. 13. FUTURE STUFF TO INVESTIGATE/LEARN  http interceptors Retry Logic Security Scenarios  Response caching

×