Vancouver AngularJS using $resource in your application
Download as PPTX, PDF2 likes4,575 views
$resource is a crucial AngularJS service for connecting to RESTful web services, allowing for standard operations like querying and saving data with a simple interface. The session discusses best practices, including using promises instead of callbacks for better asynchronous handling, and emphasizes the need for abstractions to manage API changes effectively. Key points include error handling, layer isolation, and future enhancements to explore, such as HTTP interceptors and response caching.
![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() {}
};
} ]);](https://image.slidesharecdn.com/vancouverangularjs-usingresource-140403103715-phpapp02/85/Vancouver-AngularJS-using-resource-in-your-application-11-320.jpg)
{
//Odd finally syntax is for IE8 compat
$scope.showSpinner = false;
});](https://image.slidesharecdn.com/vancouverangularjs-usingresource-140403103715-phpapp02/85/Vancouver-AngularJS-using-resource-in-your-application-12-320.jpg)
Vancouver AngularJS using $resource in your application
- 1. $RESOURCE VANCOUVER ANGULARJS – APRIL 2ND, 2014
- 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: [email protected]
- 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. 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. $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. 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. $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. 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. 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. 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. 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. 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. FUTURE STUFF TO INVESTIGATE/LEARN http interceptors Retry Logic Security Scenarios Response caching