Demandant Exemple pour angular.js $http (ou $ressource) POST et transformRequest en tant que service

$RESSOURCE EXEMPLE

Pour csrf, Dans une application rails, vous devez ajouter <%= csrf_meta_tags %> dans votre en-tête de page (si pas là par défaut)

var app = angular.module('app', ['ngResource']);
app.config(["$httpProvider", function(provider)
{
      provider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
}]);

Ici est un objet de service

app.factory('$folders', ['$resource', function($resource)
{
    return $resource('/folders/:id',
            { id: '@id' },
            {
              list: { method: 'GET' , isArray: true }, //same as query
              create: { method: 'POST' }, //same as save
              update: { method: 'PUT' }
              //DEFAULT IMPLEMENTATION OF $RESOURCE
              //  'get':    {method:'GET'},
              //  'save':   {method:'POST'},
              //  'query':  {method:'GET', isArray:true},
              //  'remove': {method:'DELETE'},
              //  'delete': {method:'DELETE'}
            });
}]);

Voici un exemple sur un contrôleur

app.controller('projectController', ['$scope', '$folders', function($scope, $folders)
{
    $scope.folders = $folders.list();
}]);

Folders.list() fera automatiquement GET /folders/ sur le serveur et retourner le résultat(qui doit être json) comme un objet.

Astuce:

Directement après $scope.folders = Folders.list(); dans le contrôleur, $scope.folders sera vide, il sera renseigné dans le temps, lorsque la réponse renvoyée par le serveur.

Exemples simples avec $http et $ressources
http://jsfiddle.net/jhsousa/aQ4XX/

SUR LA FORME

ici est une forme

%form{'ng-submit' => 'create(item)', 'ng-controller' => 'projectController', 'ng-init' => 'item.orientation=1;'}
  %input{'ng-model'=>'item.folderName', :type => :text, :placeholder => 'Name', :name => 'folderName'}
  %textarea{'ng-model'=>'item.description', :placeholder => 'Description', :required=>true, :name => 'description'}
  %input{'ng-model'=>'item.orientation', :type=>'radio', :name=>'orientation', :value=>'1'}
  %input{'ng-model'=>'item.orientation', :type=>'radio', :name=>'orientation', :value=>'2'}
  %input{:type => :submit, :value => 'Create', :name => 'new-project'}

Vous remarquerez la ng-model.
'ng-model'=>'item.folderName' permettra de créer un $scope.item dans le projectController et ajouter une touche de folderName. De même pour les autres ng-model'.

'ng-init'=>'item.orientation=1;' va exécuter l'expression. Donc, il va faire ce qui suit item.orientation=1, et cette façon de nous définir une valeur par défaut pour notre radio entrées, si simple.

Lorsque le formulaire est soumis ng-submit l'attraper et d'appeler la create action de la projectController avec itemen paramètre, pas besoin de dire que item contiendra les entrées de valeurs?

Ici, c'est le contrôleur de la partie

app.controller('projectController', ['$scope', '$folders', function($scope, $folders)
{
    $scope.create = function(item)
    {
        f = new $folders(item);
        f.$save(function(data,headers)
                {
                   alert('SAVED');
                },
                function(err,headers)
                {
                    alert('FAILED');
                });
    };
}]);

$scope.create est l'action qui sera appelé par ng-submit, item est le item paramètre de la forme, de sorte que vous trouverez des choses à l'intérieur comme item.description.

Folders est l'objet de service nous avons parlé plus tôt.

OriginalL'auteur Micka