Wrapping $resource with api and data services.

resources.js

angular.module('app.resources', ['ngResource'])
  .factory('api', function ($resource) {

    var api = {
      defaultConfig : {id: '@id'},

      extraMethods: {
        'update' : {
          method: 'PUT'
        }
      },

      add : function (config) {
        var params, 
          url;
      
        // If the add() function is called with a
        // String, create the default configuration.
        if (angular.isString(config)) {
          var configObj = {
            resource: config,
            url: '/' + config
          };

          config = configObj;
        }


        // If the url follows the expected pattern, we can set cool defaults
        if (!config.unnatural) {
          var orig = angular.copy(api.defaultConfig);
          params = angular.extend(orig, config.params);
          url = config.url + '/:id';

        // otherwise we have to declare the entire configuration. 
        } else {
          params = config.params;
          url = config.url;
        }
        
        // If we supply a method configuration, use that instead of the default extra. 
        var methods = config.methods || api.extraMethods;

        api[config.resource] = $resource(url, params, methods);
      }
    };    
    
    return api;
  })
    
  .provider('data', {
    
    list : function (resource, query) {
      return [
        'data',
        function (data) {  // inject the data service
          return data.list(resource, query);
        }
      ]
    },
    
    get: function (resource, query) {
      return [
        'data',
        function(data) {
          return data.get(resource, query);
        }
      ]
    },
    
    $get: function (api) {
      
      var data = {

        list: function (resource, query) {
          return api[resource].get(query).$promise;  
        },
        
        get : function (resource, query) {
            return api[resource].get(query).$promise;
        },

        create : function (resource, model) {
          return api[resource].save(model).$promise;
        }, 

        update : function (resource, model) {
          return api[resource].update(model).$promise;
        },

        remove : function (resource, model) {
          return data.remove(resource, model).$promise;
        }
      };

      return data;
    }
  });

timesheets.controllers.js

angular.module('app.timesheets.controllers', [
  'timesheet.directives'
])

  .controller('TimesheetCtrl', function (data, $scope, $state, $stateParams, timesheets) {

      $scope.requestTimesheets = function requestTimesheets (page) {

        var query = {
          user_id: $stateParams.user_id
        };

        data.list('timesheets', query)
          .then(function (pageConfig) {
            $scope.timesheets = timesheets;
          });
      };

      $scope.remove = function remove (timesheet) {

        data.remove('timesheets', timesheet)
          .then(function () {
            // success !!
          })
          .catch(function (x) {  
            // error !! 
          });
      };
    }
  )

  .controller('TimesheetDetailCtrl', function ($scope, $state, $stateParams, data, timesheet) {
      $scope.timesheet = timesheet;
    } 
  )

  .controller('TimesheetEditCtrl', function ($scope, $state, $stateParams, data, timesheet) {
      $scope.timesheet = timesheet;

      $scope.save = function save () {
        $scope.timesheet.$update()
          .then(function (updated) {
            $scope.timesheet = updated;
            // success !!
          })
          .catch(function (x) {
            // error !!
          });
      };
    }
  );
    

timesheets.js

angular.module('app.timesheets', [
  'app.timesheets.controllers',
  'ui.router',
  'authorization.services'
])

  .config(function ($stateProvider, dataProvider) {

    $stateProvider
      .state('app.timesheets', {
        url: '/timesheets',
        controller: 'TimesheetCtrl',
        templateUrl: 'assets/templates/app/timesheets/index.html'
      })

      .state('app.timesheets.detail', {
        url: '/:id',
        controller: 'TimesheetDetailCtrl',
        templateUrl: 'assets/templates/app/timesheets/detail.html',
        resolve : {
          timesheet : ['$stateParams', function ($stateParams) {
            return data.get('timesheets', $stateParams);
          }]
        }
      });
  })

  .run(function (api) {
    api.add('timesheets');
  }); 

I am looking to solve this exact problem. Thanks for posting this.

If I may nitpick, in the create function for the provider, .$save() already returns a promise so .$promise will be undefined.

@ernestopye You are totally right. For another example, I changed it to use the resource function instead of the instance function. You can do either.

Good stuff
Thanks

What is unnatural? Where does it come from? How does it get set? Very confusing!