it-swarm.com.de

Speichern neuer Modelle mit AngularJS und $ resource

Ich versuche, AngularJS mithilfe von $ resource zu verstehen, aber die meisten Beispiele, die ich dort sehe, erklären nicht, wie neue Instanzen von etwas mithilfe von $ resource erstellt werden (oder wie das gesamte Setup aussehen sollte). Ich habe unten meinen Code gepostet.

Ich habe das folgende Setup, bei dem das Posten in '/ entry/api' einen neuen Eintrag erstellen sollte. Das Eintragsobjekt selbst hat drei Eigenschaften: Name, Beschreibung und ID.

ich dachte, dass der Aufruf von $ scope.save (); würde zwei Dinge tun:

  1. Ordnen Sie die Eingabefelder als POST data
  2. mache eine POST Anfrage an die in der $ resource definierte URL (in diesem Fall '/ entry/api')

Einige Beispiele, die ich gesehen habe, ordnen die Daten manuell der Ressource als solche zu:

var entry = new Entry();
entry.name = $name; // defined in entryController
entry.description = $scope.description; // <-- defined in entryController
entry.$save()

Ich dachte, dass dies nicht notwendig sein sollte, da diese Felder im HTML definiert sind. Diese Lösung führt zu:

  1. Ein Modell im Backend definieren
  2. Ein Modell im Frontend definieren (der entryController div)
  3. Hinzufügen der Werte aus dem entryController div zur JS-Version des Modells und anschließendes Speichern.

Es könnte sein, wie AngularJS funktioniert, aber ich dachte, dass die Eingabefelder im HTML-Code automatisch zugeordnet werden.

Andernfalls müssen Sie mindestens 3 Stellen im Code aktualisieren, wenn Sie eine Eigenschaft Ihres (Back-End-) Modells hinzufügen oder entfernen.

Wie soll AngularJS zusammen mit $resource Zum Speichern neuer Objekte verwendet werden?

angular.module('entryManager', ['ngResource']);

function pollController($scope, $resource) {
    $scope.polls = $resource('/entry/api/:id', {id: '@id'});

    $scope.saveEntry = function() {
        this.save();
    }
}


<html ng-app="entryManager">
... <-- include angularjs, resource etc.

<div ng-controller="entryController">
    <input type='text' ng-model="name"><br/>
    <textarea ng-model="description" required></textarea><br/>
    <button class="btn btn-primary" ng-click="saveEntry()">Save</button>
</div>
39
Jones

Der erste Gedanke, den Sie beachten sollten, ist, dass scope != model, Der Gültigkeitsbereich jedoch auch Modelle enthalten kann.

Sie sollten ein Objekt in Ihrem Bereich haben und es dann speichern.

Es würde also so etwas wie folgendes geben:

HTML:

<div ng-controller="entryController">
    <input type='text' ng-model="poll.name"><br/>
    <textarea ng-model="poll.description" required></textarea><br/>
    <button class="btn btn-primary" ng-click="saveEntry()">Save</button>
</div>

JavaScript:

function pollController($scope, $resource) {
    var polls = $resource('/entry/api/:id', {id: '@id'});

    $scope.saveEntry = function() {
        polls.save($scope.poll);
    }
}

Hinweis 1: Auch wenn Sie kein Abfrageobjekt initialisiert haben, erstellt AngularJS automatisch ein neues Objekt, wenn Sie mit der Eingabe beginnen.

Anmerkung 2: Es ist besser, Ihr Formular in ngForm zu packen (indem Sie das Attribut ng-form="someformname" Zu div mit ng-controller hinzufügen oder mit <form name='...'>..</form> Packen) In diesem Fall können Sie vor dem Speichern die Gültigkeit des Formulars mit $scope.someformname.$valid prüfen.

Ein gutes Beispiel finden Sie auf der Hauptseite der AngularJS-Website unter "Wiring the Backend" (übrigens, mein Favorit).

46

Verwenden Sie die Speichermethode nicht über dem Modellobjekt selbst, sondern die Speichermethode der Modellklasse. Beispiel:

//inject User resource here
$scope.user = new User();

$scope.user.name = "etc";

User.save($scope.user,function(response){

});

zuvor habe ich $scope.user.$save(function(response){}) verwendet und dabei mein $ scope.user-Objekt gelöscht

4
Vivek