vancouver angularjs using $resource in your application
DESCRIPTION
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.TRANSCRIPT
![Page 1: Vancouver AngularJS using $resource in your application](https://reader034.vdocuments.site/reader034/viewer/2022051211/554f730eb4c905bb178b532a/html5/thumbnails/1.jpg)
$RESOURCEVANCOUVER ANGULARJS – APRIL 2ND, 2014
![Page 2: Vancouver AngularJS using $resource in your application](https://reader034.vdocuments.site/reader034/viewer/2022051211/554f730eb4c905bb178b532a/html5/thumbnails/2.jpg)
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
Background8 years as a Program Manager at Microsoft before EDP
SoftwareUniversity of Waterloo alumni
We’re hiring! http://www.edpsoftware.com/about-edp-software/careers/
Email: [email protected]
![Page 3: Vancouver AngularJS using $resource in your application](https://reader034.vdocuments.site/reader034/viewer/2022051211/554f730eb4c905bb178b532a/html5/thumbnails/3.jpg)
GOALS FOR TODAY
Use $resource for connecting to REST web services
Discuss how to use $resource in a web applicationSeparate API details from applicationWhere to put common tasks like data
transforms
Get feedback from the group on what else could be done better!
![Page 4: Vancouver AngularJS using $resource in your application](https://reader034.vdocuments.site/reader034/viewer/2022051211/554f730eb4c905bb178b532a/html5/thumbnails/4.jpg)
MY THOUGHTS ON COMMON EXAMPLES
Most documentation is too simpleLogic for using $http or $resource is built
right into a controllerTwo big issues that I found
REST API changes are not isolatedNo common place to handle async status
![Page 5: Vancouver AngularJS using $resource in your application](https://reader034.vdocuments.site/reader034/viewer/2022051211/554f730eb4c905bb178b532a/html5/thumbnails/5.jpg)
$RESOURCE INTRO
Provides a really simple way to grab data from a REST endpointStandard methods for query, get, save,
deleteEasy 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();
![Page 6: Vancouver AngularJS using $resource in your application](https://reader034.vdocuments.site/reader034/viewer/2022051211/554f730eb4c905bb178b532a/html5/thumbnails/6.jpg)
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
![Page 7: Vancouver AngularJS using $resource in your application](https://reader034.vdocuments.site/reader034/viewer/2022051211/554f730eb4c905bb178b532a/html5/thumbnails/7.jpg)
$HTTP VS. $RESOURCEPROMISES VS. CALLBACKS
$http uses promises as the design pattern for managing async actions
$resource defaults to using a callback structureAllow 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.
![Page 8: Vancouver AngularJS using $resource in your application](https://reader034.vdocuments.site/reader034/viewer/2022051211/554f730eb4c905bb178b532a/html5/thumbnails/8.jpg)
CALLBACKS FOR SETTING RESULTS
BAD – What many base examples showNo 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….
});
![Page 9: Vancouver AngularJS using $resource in your application](https://reader034.vdocuments.site/reader034/viewer/2022051211/554f730eb4c905bb178b532a/html5/thumbnails/9.jpg)
ERROR HANDLING – SECOND CALLBACK
http://stackoverflow.com/questions/20584367/how-to-handle-resource-service-errors-in-angularjsResource.query(function(data) {
// success handler }, function(error) {
// error handler });
![Page 10: Vancouver AngularJS using $resource in your application](https://reader034.vdocuments.site/reader034/viewer/2022051211/554f730eb4c905bb178b532a/html5/thumbnails/10.jpg)
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 dataPromises can be chained togetherThe return result from one promise goes into
the next as the incoming data
![Page 11: Vancouver AngularJS using $resource in your application](https://reader034.vdocuments.site/reader034/viewer/2022051211/554f730eb4c905bb178b532a/html5/thumbnails/11.jpg)
EXAMPLEangular.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() {}
}; } ]);
![Page 12: Vancouver AngularJS using $resource in your application](https://reader034.vdocuments.site/reader034/viewer/2022051211/554f730eb4c905bb178b532a/html5/thumbnails/12.jpg)
EXAMPLE PART IIMeanwhile.... 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;
});
![Page 13: Vancouver AngularJS using $resource in your application](https://reader034.vdocuments.site/reader034/viewer/2022051211/554f730eb4c905bb178b532a/html5/thumbnails/13.jpg)
FUTURE STUFF TO INVESTIGATE/LEARN
http interceptorsRetry LogicSecurity Scenarios
Response caching