vancouver angularjs using $resource in your application
Post on 10-May-2015
1.697 Views
Preview:
DESCRIPTION
TRANSCRIPT
$RESOURCEVANCOUVER ANGULARJS – APRIL 2ND, 2014
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: hr@edpsoftware.com
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!
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
$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();
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
$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.
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….
});
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 });
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
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() {}
}; } ]);
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;
});
FUTURE STUFF TO INVESTIGATE/LEARN
http interceptorsRetry LogicSecurity Scenarios
Response caching
top related