ngularJS

Presented by Dustin Goodman (@dustinsgoodman)

Powered by

Creating API Services

Who am I?

• 4+ years as a RoR dev

• 3+ year working in AngularJS

• Web Developer at Springbot for the past year

DisclaimerThis is a talk on AngularJS and how to implement API services using its framework utilities. This is not a talk on user interface (UI) and user experience (UX). As such, there are tons of things in the demonstration proportion of this talk that are really bad UI/UX and frankly, I don’t care because they’re excellent for the purposes of this talk because it clearly defines how to utilize these tools. That being said, there are examples in this demo unrelated to the APIs themselves that go against best practices for AngularJS in order to make points. If you haven’t already, go read the Angular style guides by Todd Motto and John Papa to distinguish where I’m diverging from best practices and as an exercise, fork my code and fix it yourself.

TL;DR: I did bad things intentionally, …..

APIs• Application Program Interface -

Google Maps, YouTube, Twitter, Amazon

• APIs make your boring Single Page Applications (SPA) interesting!

• Web APIs are what we’ll use in Angular

RESTful API• Representational State Transfer

• software architecture style consisting of guidelines and best practices for creating scalable web services

• REST Verbs: GET, POST, PUT, PATCH, DELETE

• Routes should use nouns

Using HTTP APIs in Angular• write API calls in controllers

• write API services

• use jQuery AJAX library!

• write unit tests

• use an API spec

• use a standard for APIs like the JSON API

What are services?• Provides a DRY interface for

creating reusable controller code

• Acts as a singleton => Great for REST communication & session data (if in an SPA)

• Can share among controllers through dependency injection

$http• “The $http service is a core Angular service that

facilitates communication with the remote HTTP servers via the browser's XMLHttpRequest object or via JSONP.”

• Super simple API similar to that of jQuery’s AJAX

• TL;DR: You want data from a server with AngularJS, this is how you get it.

$http - The API

• 7 core methods: get, head, post, put, delete, jsonp, patch

• get, delete, head, jsonp take a path and config

• post, put, patch take path, “data”, and config

• config takes in headers, query params, and other request based params (see docs)

$http meet $q• All $http methods return a promise with 2 paths:

• success: response < 400

• error: response >= 400

$http meet $q - The Code

ngResource & $resource• “The ngResource module provides interaction

support with RESTful services via the $resource service.”

• “A factory which creates a resource object that lets you interact with RESTful server-side data sources.”

The $resource API• url: A parametrized URL template with parameters prefixed by “:”.

• example: $resource(‘http://example.com/resource/:resource_id.:format')

• paramDefaults: Default values for url parameters. These can be overridden in actions methods. If any of the parameter value is a function, it will be executed every time when a param value needs to be obtained for a request (unless the param was overridden).

• { verb: “all”, limit: 10 } => ‘/path/all?limit=10’

• actions: Hash with declaration of custom action that should extend the default set of resource actions.

• Output (default) { get: { method: ‘GET’ }, save: { method: ‘POST’ }, query: { method: ‘GET’, isArray: true }, remove: { method: ‘DELETE’ }, delete: { method: ‘DELETE’ } }

The $resource API - cont.• Returned object can be handled in one of 3 ways:

1. HTTP GET-type requests: Resource.action([params], [success], [error])

2. HTTP non-GET-type requests: Resource.action([params], postData, [success], [error])

3. non-GET instance actions: instance.action([params], [success], [error])

Restangular• ngResource/$resource replacement

• API wrapper around the $http module

• Has its own opinions on API design

• cleaner api but results get transformed into a “restangular” object and occasionally causes unpredictable results

• Recommendation: Don’t use this library unless absolutely necessary.

Martin Gontovnikas

Bring it all together!

HTTP Server

AngularJS API Service

AngularJS Controller

• Define HTTP Server as needed for appropriate JSON API

• Create AngularJS Service whose job is to communicate specifically with that controller

• Good practice to make method names on service same as resource method

• Call appropriate methods on AngularJS controller

Additional Resources• Styles Guides:

• John Papa: https://github.com/johnpapa/angular-styleguide

• Todd Motto: https://github.com/toddmotto/angularjs-styleguide

• Tutorials:

• Egghead: https://egghead.io/technologies/angularjs

• Twitter:

• @angularjs, @AngularTutorial, @angularjs_io, @AngularJS_News, @ng_directives