Angular's Resource module is amazing

AngularJS can be a little tricky, but with a tiny bit of perseverance makes web development feel as it should be - fast and easy to work with. I'm a newcomer, but already I find it saves me hours of development times on projects.

Angular Resource is a high-level abstraction which adheres to the usual RESTful pattern of server-side interactions and is - in short - amazing. My objective here is not to fully explain how it works (the documentation does a far better job than I ever could), but to provide a humble
working example from my own experiences.

overview

Angular resource will let us define a single url with which to perform operations. It will perform a POST on creation, a DELETE when called to delete from
Angular and GET when performing normal get or query requests.

Rather more nicely, it will handle all of this without the callback hierarchy normally required but is asynchronous. Promises built into it
may be used to handle any race-conditions that may arise.

Example - a simple CRUD interface

Installing Angular Resource

1. Install the javascript file in addition to Angular. I believe it's included in the same package on Angular's download, but as a separate file.
   However, I I like to use bower:

   bower install angular-resource

2. Add it as a dependency to your module:

   var app = angular.module('app', ['ngResource']);

Create a factory

Creating a factory which will then use the $resource allows for better separation of concerns than placing it within the controller. It also makes for a single
point to edit any interactions between your client-side code and the server.

To use the $resource simply include it as a parameter in the declaration of the function. Angular's dependency injection system (more magic) will
find this and insert it into your factory.

app.factory('Widgets', function($resource){
    return $resource('/widgetAPI/:id');
});

Note the returning of a url with :id. This will be replaced by ngResource when it is passed in the hash. This doesn't have to be just :id, it can be any
parameter(s) you wish to pass in.

Controller CRUD example

The provider may now be simply used in the controller

app.controller('WidgetCtrl', function($scope, Widgets){

A 'getter' for doing any processing or loading.

var getWidgets = function() {

  //Get the widgets and put them into $scope when they load. 
  $scope.Widgets = Widgets.query({userid: $scope.userid});
};

Creation or updating

$scope.createWidget = function() {

  //Create a new widget object and send it to the server to be saved 
  var save = Widgets.save({notes: $scope.widget.notes, id: $scope.widget.id}); 
  //Creates a POST request to /widgetAPI/<id>

  //Angular returns a promise object:
  save.$promise.then(function(){
    getWidgets(); 
    //get the widgets from the server again to refresh any server-side data
  });
};

Deletion

$scope.deleteWidget = function(id) {
  Widgets.delete({id: id}).$promise.then(function(){
    getWidgets(); 
    //let the server sort out what happends and then pull data again
  });
}