Ersuchenden Beispiel für angular.js $http und $resource) POST-und transformRequest as a service

Mit Winkel 1.1.5 und benötigen, um pass-urlencoded Daten an das backend. Ich habe diese Arbeit mit der Lösung von hier:
Wie kann ich die post-Daten als Daten in das Formular, statt ein Anfrage-payload? 

$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        return str.join("&");
    },
    data: xsrf
}).success(function () {});

Habe ich eingebettet sind diese in meinem controller mit Erfolg, aber die "sauberere" Weg ist, einen service zu nutzen, und $ - Ressource anstelle des $http-Objekt.
Es ist möglich, transformRequest mit $resource nach 1.1.2 zu diesem Thema:
$resource transformResponse nicht funktioniert
aber ich finde keine funktionierende Beispiele. Kann mir jemand ein Beispiel geben, die oben genannte Lösung als ein service-Objekt mit $resource?

InformationsquelleAutor user2525528 | 2013-06-26
  1. 14

    $RESOURCE BEISPIEL

    Für csrf, In eine rails-app, die Sie Hinzugefügt haben, um die <%= csrf_meta_tags %> in Ihrem header-layout (wenn es nicht standardmäßig)

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

    Hier wird ein service-Objekt

    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'}
            });
}]);

    Hier ist ein Beispiel in einem controller

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

    Folders.list() automatisch GET /folders/ auf dem server und gibt das Ergebnis aus(das sollte json) als ein Objekt.

    Tipp:

    Direkt nach $scope.folders = Folders.list(); im controller $scope.folders leer, wird es gefüllt werden, in der Zeit, wenn die Antwort wieder vom server.

    Einfache Beispiele mit $http und $Ressourcen
    http://jsfiddle.net/jhsousa/aQ4XX/

    ÜBER DIE FORM

    hier ist eine form

    %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'}

    Werden Sie feststellen, die ng-model.
    'ng-model'=>'item.folderName' erstellen einer $scope.item im projectController und fügen Sie einen Schlüssel folderName in es. Dasselbe für die anderen ng-model's.

    'ng-init'=>'item.orientation=1;' wird zum ausführen der Ausdruck. So wird es nicht die folgenden item.orientation=1 wir auf diesem Wege einen Standardwert für unsere radio-Eingänge, so einfach.

    Wenn das Formular abgeschickt wird ng-submit fangen, und rufen Sie die create Aktion aus der projectController mit itemals parameter, keine Notwendigkeit zu sagen, dass item enthalten die Eingänge Werte?

    Hier ist die controller-Teil

    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 ist die Aktion, die aufgerufen wird, durch ng-submit, item ist die item parameter aus dem Formular, so finden Sie Sachen in wie item.description.

    Folders ist das service-Objekt, das wir vorher gesprochen haben.

    InformationsquelleAutor Micka
Schreibe einen Kommentar