ejemplos - Guardar nuevos modelos usando AngularJS y $ resource
directivas angularjs (2)
Estoy tratando de comprender AngularJS utilizando $ resource, sin embargo, la mayoría de los ejemplos que veo no explican cómo crear nuevas instancias de algo usando $ resource (o cómo debería verse toda la configuración). He publicado mi código al pie de esto.
Tengo la siguiente configuración, donde publicar en ''/ entry / api'' debería crear una nueva entrada. El objeto de entrada en sí tiene tres propiedades: nombre, descripción e id.
pensé que llamar a $ scope.save (); haría dos cosas:
- Asigne los campos de entrada como datos POST
- hacer una solicitud POST a la url definida en $ recurso (en este caso ''/ entry / api'')
Algunos ejemplos que he visto son mapear manualmente los datos al recurso como tal:
var entry = new Entry();
entry.name = $name; // defined in entryController
entry.description = $scope.description; // <-- defined in entryController
entry.$save()
Pensé que esto no se suponía necesario, ya que estos campos están definidos en el html. Esta solución da como resultado:
- Definiendo un modelo en el backend
- Definición de un modelo en el front end (el entryController
div) - Agregando los valores del
diventryController a la versión JS del modelo y finalmente guardándolo.
Puede ser la forma en que funciona AngularJS, sin embargo, pensé que los campos de entrada en el html se mapearían automáticamente.
De lo contrario, tiene al menos 3 lugares en el código para actualizar si agrega o elimina una propiedad de su modelo (backend).
¿Cómo se supone que debes usar AngularJS junto con $resource para guardar objetos nuevos?
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>
El primero cree que debe tener en cuenta, ese scope != model , pero el alcance puede contener modelo (s).
Debería tener algún objeto en su alcance y luego guardarlo.
Entonces, habría algo como lo siguiente:
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);
}
}
Nota 1: incluso si no tiene un objeto de sondeo inicializado, AngularJS creará automáticamente un nuevo objeto cuando comience a escribir.
Nota 2: es mejor ajustar el formulario en ngForm (agregando el atributo ng-form="someformname" a div con ng-controller o wrap con <form name=''...''>..</form> . En este caso puede verificar la validez del formulario por $scope.someformname.$valid antes de guardar.
Un buen ejemplo es en la página principal del sitio web de AngularJS en la sección "cableado del back-end" (por cierto, el favorito).
No use el método de guardar sobre el objeto de modelo en sí, use el método de guardar de la clase de modelo, por ejemplo -
//inject User resource here
$scope.user = new User();
$scope.user.name = "etc";
User.save($scope.user,function(response){
});
anteriormente estaba usando $scope.user.$save(function(response){}) estaba borrando mi objeto $ scope.user