Welcome to Part 7 of this review of the Pluralsight course Angular Best Practices by Joe Eames.

Joe has worked both full and part time as a technical teacher for over ten years.

He has produced 18 courses for Pluralsight.

Communicating with The Server

Introduction

This module covers server communication with the $resource and $http services, and how to configure it.

It also covers Restangular, a 3rd party library aiming to replace $resource.

The $http service is lower level than $resource, which is used for RESTful endpoints.

There’s a new example app for this module, and Joe runs through the main code files.

Using $resource

Joe changes how the login works, checking credentials. To demonstrate the concepts in the simplest way, he uses the anti-pattern of  checking them on the client.

At 5:50 we see that everything still works in the browser.

Using $http to Read Data

We continue to adapt our code to read and write to web service endpoints, beginning with a new service with get and save functions for followed instructors.

Joe demonstrates how we can use Angular’s automatic promise resolution and binding to set the relevant data. This uses a deferred object and the resolve function on it.

Using $http to Save Data

Joe starts in catalog.html, wrapping the instructor name with an anchor tag and an ng-click attribute.

This ng-click invokes a new function. We see the error:

TypeError: Cannot call method 'forEach' of undefined

$scope.followedInstructors is undefined here because the catalog and followedInstructors controllers are siblings.

We see how to fix this and we are then able to save data in-between page refreshes.

$http, $resource, and Promises

This talks about a couple of topics:

1. Using $resources in order to access non-RESTful endpoints
2. The differences in $http, $resource and $q promises

$resource has a couple of nice features, and we see how it lets us write simpler code and keep logic out of the controller.

We see the $http promise has 5 functions:

• then
• catch
• finally
• success
• error

The $q promise is an array. Inside it has data including a promise object with three functions:

• then
• catch
• finally

Quiz
– You should never use a $resource to access a non-RESTful service. True or False?
– Which source of promises has a different API. $http, $request, or $q?
– Every type of Angular promise has a then function. True or False?

HTTP Configuration

This lesson looks at configuring HTTP requests. Joe shows us some of the configuration options, beginning with caching.

We see how our page behaves with and without caching.

Normally data is posted as a request body. Joe shows us this using Chrome’s network inspector. Certain types of servers won’t accept this datastructure, so Joe shows us how to URL encode the data instead.

Quiz
– Caching will only work if the URL of the request is the same. True or False?
– Can you set custom headers for one specific request?
– When you set a header globally, it can be customized by HTTP verb. True or False?

Transforms

Transforms allow us to modify the data coming in or out of an HTTP call.

Joe shows us two examples:

• adding a  timestamp via a transform request. This is done within the $http.post arguments list.
• A transform response

Interceptors

Interceptors give us an opportunity to intercept HTTP requests in a centralized place.

We see that we can create one by calling $provide.factory

The return object has up to four keys:

• request
• requestError
• response
• responseError

All of these are explained by Joe, and we see how to push the interceptor into $httpProvider.interceptors

Quiz

– If you had some oddly shaped data on the server and you needed to change it before it went through binding, would you use an interceptor or a transform?
– If you wanted to add additional data to every request, would you use a transform or an interceptor?
– What does one of the built in angular transforms do?

Using Restangular

You can find Restangular on GitHub. It has a dependency or either Underscore or Lo-Dash.

Joe shows us how we can add it to our project and replace the $resource service with Restangular functionality.