$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