Modo consigliato per ottenere dati dal server


145

Qual è il modo consigliato per connettersi alle origini dati del server in AngularJS senza usare $resource.

Ci $resourcesono molte limitazioni come:

  1. Non usare futuri adeguati
  2. Non essere abbastanza flessibile

6
È ancora vero che $ resource ha la limitazione di non usare i futuri adeguati dato che questo problema (https://github.com/angular/angular.js/issues/415) è stato chiuso? (Sono nuovo di Angular, mi scuso se la domanda è confusa.) EDIT - Questo commit ( github.com/angular/angular.js/commit/… ) sembra anche suggerire che $ resource potrebbe non avere più questa limitazione?
Jason Sydes,

1
bene è legale qui per rispondere alle tue domande .. ok? premi "Poni domanda", chiamato "condividi le tue conoscenze"
holms,

Risposte:


229

Ci sono casi in cui $ resource potrebbe non essere appropriato quando si parla con il backend. Questo mostra come impostare un comportamento simile a $ resource senza usare la risorsa.

angular.module('myApp').factory('Book', function($http) {
  // Book is a class which we can use for retrieving and 
  // updating data on the server
  var Book = function(data) {
    angular.extend(this, data);
  }

  // a static method to retrieve Book by ID
  Book.get = function(id) {
    return $http.get('/Book/' + id).then(function(response) {
      return new Book(response.data);
    });
  };

  // an instance method to create a new Book
  Book.prototype.create = function() {
    var book = this;
    return $http.post('/Book/', book).then(function(response) {
      book.id = response.data.id;
      return book;
    });
  }

  return Book;
});

Quindi all'interno del controller è possibile:

var AppController = function(Book) {
  // to create a Book
  var book = new Book();
  book.name = 'AngularJS in nutshell';
  book.create();

  // to retrieve a book
  var bookPromise = Book.get(123);
  bookPromise.then(function(b) {
    book = b;
  });
};

1
Forse una domanda noob, ma come estenderlo per consentire un get () che ha restituito più risposte non solo una singola risposta?
Nate Bunney,

2
@NathanBunney, potresti avere il tuo metodo statico get sopra il ciclo attraverso i risultati e creare una matrice di libri.
Ben Lesh,

4
@NathanBunney 'Book.getAll = function () {return $ http.get (' / Book '). Then (function (response) {var books = []; for (var i = 0; i <response.data.length ; i ++) {books.push (nuovo libro (response.data [i]));} return books;}); };'
Yair Nevet,

2
Come condivideresti una bookcollezione di messaggi booktra controller?
Lukas,

1
Questo è fantastico (ovviamente da quando Misko ha creato il framework), ma sto lottando per capire come renderlo riutilizzabile. Se volessi implementare le funzioni CRUD solo una volta e poi ereditarne la funzionalità in fabbriche / servizi figlio che necessitavano solo di un argomento urlBase (preferibilmente memorizzato sul prototipo in modo che ogni istanza non avesse bisogno di una nuova copia di urlBase), come sarebbe Lo faccio?
Dean Stamler,

26

Ti consiglio di usare $ resource .

Potrebbe supportare (overlide url) nella prossima versione di Angularjs. Quindi sarai in grado di programmare in questo modo:

// need to register as a serviceName
$resource('/user/:userId', {userId:'@id'}, {
    'customActionName':    {
        url:'/user/someURI'
        method:'GET',
        params: {
            param1: '....',
            param2: '....',
        }
    },
     ....
});

E i callback di ritorno possono essere gestiti in questo ambito ctrl.

// ctrl scope
serviceName.customActionName ({
    paramName:'param',
    ...
}, 
function (resp) {
    //handle return callback
}, 
function (error) {
    //handler error callback
});

Probabilmente puoi gestire il codice su un livello di astrazione più alto.


2
La versione corrente di angular.js supporta la sostituzione dell'URL nel modulo $ resource.
ringraziamento

16
Ahah stai raccomandando il vero creatore del framework su come fare qualcosa: P
HeberLZ

11
OH MIO DIO! Mi vergogno così tanto.
Ringraziamento il
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.