Angular $provides

constant, decorator, factory, provider, service, value

whoa.

this: http://goo.gl/xtuF1

Who Am I?

Wes Alvaro

Software Engineer @ Google
Obsessed with JavaScript
(especially AngularJS)

Agenda

  • $provide
    • value
    • constant
    • service
    • factory
    • decorator
    • provider
  • Creating our own service
    • GAPI - Google JS API Client

Why do I care?

Dependency Injection.

Modularization.

Testing.

$provide

Get data and objects into your app.

Injected singletons with a $get method, essentially.

constant

A constant is a value injectable anywhere!
app.constant('jellyBean', 4.2);

Can not be intercepted by a decorator.
High priority.
Example

value

A simple injectable value.
app.value('name', 'Larry');

Can not be injected into configurations.
Can be intercepted by decorators.
Example

Service

Injectable constructor.
app.service('api', function (dep) {...});

A singleton.
Good for cross app/controller communication.
Example

Factory

Injectable function for returning factory stuff.
app.factory('widget', function (dep) {... return ?;})

A provider with only a $get method, essentially.
Example1 | Example2

Decorator

Modify or encapsulate other provisions.
app.config(function($provide) {
  $provide.decorate('name', function($delegate) {
    // Modifications to the 'name' provision.
    return $delegate + ' the Great';
  });
});

Useful for modifying upstream services.
Stackable.
Example

Provider

The low-level nitty gritty.
$provide.provider('foo', {$get: function(dep) {...}});
$provide.provider('foo', function(){
  this.$get = function(dep) {...}
});

You just need a $get method.
More storage options.
Can $inject other providers when instantiated.
Example

¡Pop Quiz!

app.value('v', 7);

app.config(function(c) { });         // config-c
app.config(function(v) { });         // config-v
app.config(function($provide) {      // config-p
  $provide.provider('p', {
    $get: function(v) { }
  });
});
app.constant('c', function(v) {  });
app.factory('f', function(v) {  });
app.factory('x', function(v) {  });
app.run(function(v) { });
app.service('s', function(v) { });
app.value('w', function(v) { });

app.controller('ctrl', function(v, c, w, f, p, s) { ... });

app.config can't take a 'value'.

conf-c, conf-p, run, f, p, s, x

v: 7, c: fn, w: fn, f: undef, p: undef, s: {}

QED

Playground


app.config(function($provide) {
  $provide.provider('x', {
    $get: function() {
      // ???
    }
  });
});

Google Apis

  • Google Drive API
  • gAPI.js
  • Configuration
  • Wrapping Asynchronicity
  • Reading your drive

Google Drive

An expansive API for accessing drive contents.

  • Easily search for files
  • Easily export to various formats

gAPI.js

Google API Console
Google API Explorer
Google Drive API files.list
Example

drive.files.list

List files from your drive
Requires authentication
Supports search queries
Built-in pagination

The Objective

Create a simple app.

Requirements

A search box.
Results list:
  • Meta
  • Thumbnails
  • Downloads.

Done-zo

D.I. galore!

Everything will be injected.
Most logic surrounds GAPI.

Three Modules:
  1. GAPI
  2. Drive
  3. Our App

$q

We'll tame the AJAX with $q.
Deferred Objects & Promises?
Normally we'd use $http...

Simple, no?

Questions, comments?

wna@googlers.com

this: http://goo.gl/xtuF1