Data Management & Caching with Angular.js



twitter - @DobryJason
github - @jmdobry


How does data get into your application?


  • AJAX
  • localstorage
  • cookies
  • IndexDB
  • Embedded JSON
  • User input




How does data get into the view?


  • Data-Binding
  • DOM Insertion (please don't, it's the jQuery way)


How do data changes propagate?


The path from database to view and back gets complicated


WTF?

Your application needs an entry point for data


Data consumers become ignorant of how data is obtained

Angular's Holy Grail


Views are purely reactive (declarative), bound to data in $scope

Views bind to a single source of truth (a single copy of any given piece of domain data)

When that single source of truth changes, all bound views update equally

Changes propagate via data-binding, not events or imperative programming 


Example

angular.service('PostService', function ($http) {  var posts = {};  return {    getById: function (id) {       if (!posts[id]) { this.find(id) };       return posts[id];     },    find: function (id) {      return $http.get('posts/' + id).then(function (data) {        posts[id] = data;        return data;      });    }  };}); 

Example


angular.controller('PostCtrl', function ($scope, $routeParams, PostService) {  $scope.$watch(function () {    return PostService.getById($routeParams.id);  }, function (post) {    $scope.post = post;  });});

This is one way to react to changes 

in data owned by a Service

Data Synchronization


Easy to do between client persistence layer and client views.

Much harder to manage full synchronization between database and views.

Keep your data in your Angular Services.

Controllers and Directives expose your data to your views.

Changes to your data happen in your service layer.


You're building a Model layer


Something Angular doesn't provide.

A problem Ember Data is attempting to solve.

$resource, restangular, Breeze.js, Backbone Models, etc.

Other projects like Meteor and Tower are tackling database to view synchronization (isomorphic).

Caching


Why Cache?

Performance


Reduce latency from 200ms to 1 ms
Pages load near instant
Eliminate extra AJAX requests
Ease load on server

When/what to cache?


All the things!
Easy to cache individual items. e.g.
{  id: 5,  name: 'John Smith'}

Collections are harder to cache, especially those that are the result of some query.
You can cache collection query results, but you may end up busting your cache often. 

How?

angular.service('PostService', function ($http) {  return {    find: function (id) {      return $http.get('posts/' + id, {        cache: true      });    }  };});

PostService.find(5); // 233msPostService.find(5); // 1ms
$cacheFactory.get('$http').get('posts/5'); // cached item is here


$cachefactory doesn't support ?


angular-cache has you covered



Remember...



Do you unto your data as 
you would have done unto you





Happy caching!



twitter - @DobryJason
github - @jmdobry

Data Management & Caching with Angular.js

By Jason Dobry

Data Management & Caching with Angular.js

  • 3,087

More from Jason Dobry