Q:

Choosing between local and server data

I have some working code, but it seems a bit clunky.
I need to get data from a service. The service will hold the data in local storage if possible (to make it speedier), but if it's not been accessed before, it will need an http GET to a web server. The example contains only one GET, but there could be many in the future.
Service code
var module = angular.module('myapp.service', ["ngStorage"]);

module.service('jsonlistservice', function ($http, $q, $timeout, $localStorage) {

    var getStuff = function(){

      if ($localStorage.stuff != undefined && $localStorage.stuff != "") {

        return $q(function (resolve, reject) {
          var x = {};
          x.data = $localStorage.stuff;
          resolve(x);
        });

        }else{
            return $http.get('data/sample.json').success(function(response){
              $localStorage.stuff = response;
            });
        }
    };

    return{
        getStuff: getStuff,
    };
});

From a controller this would be accessed like so:
'use strict';
angular.module('myApp.view1', ['ngRoute', 'myapp.service'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}])

.controller('View1Ctrl', ['$scope', 'jsonlistservice', function($scope, myappservice) {

    var myDataPromise = myappservice.getStuff();
        myDataPromise.then(function(result){
            $scope.test = result.data[950].Id;
            console.log("returned");
        });

}]);

What is the correct pattern for this sort of thing please?

A:

Going with your existing code, the promise part can be simplified.
var getStuff = function(){
  return !!$localStorage.stuff ? $q.resolve({ data: $localStorage.stuff })
                               : $http.get('data/sample.json').then(function(response){
                                   $localStorage.stuff = response;
                                   return response;
                                 });
};

You appear to check against undefined and a blank string for stuff, both falsy values. We can simplify by coercing them to a boolean using !!. Another improvement is using $q.resolve, which returns an already resolved promise, resolved value optional. In the same way, $http.get also returns a promise. We can simply just return them instead of creating a new promise wrapper.
myappservice.getStuff().then(function(result){
  $scope.test = result.data[950].Id;
  console.log("returned");
});

We can also chain the then to getStuff since getStuff returns a promise. Much easier to follow chained stuff than breaking them apart (might be personal preference, but chaining makes code appear like sentences instead of commands).
As for a pattern, I think this one is fine since this is a one-off request (call and get) and the controller has been shielded from knowing where the data came from.
However, if you decide to go stream this data in, like say from a websocket, or make your service poll for changes, or react to localStorage events, then the suggested Observer Pattern might be your best bet. Make your service collect callbacks and fire them when something interesting happens.

