Maneira recomendada de obter dados do servidor

145

Qual é a maneira recomendada de conectar-se às fontes de dados do servidor no AngularJS sem usar $resource.

O $resourcetem muitas limitações, tais como:

Não usar futuros adequados
Não sendo flexível o suficiente

angularjs

— Misko Hevery
fonte

Ainda é verdade que $ resource tem a limitação de não usar futuros adequados, uma vez que esse problema (https://github.com/angular/angular.js/issues/415) foi encerrado? (Sou novo no Angular, peço desculpas se a pergunta for confusa.) EDIT - Esse commit ( github.com/angular/angular.js/commit/… ) também parece sugerir que $ resource pode não ter mais essa limitação?

— Jason Sydes

bem, é legal aqui para responder suas próprias perguntas .. ok? imprensa "Pergunte", que é chamado de "compartilhar o seu conhecimento"

— holms

Respostas:

229

Há casos em que $ resource pode não ser apropriado ao conversar com o back-end. Isso mostra como configurar um comportamento semelhante a $ resource sem usar o recurso.

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

Em seguida, dentro do seu controlador, você pode:

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

— Misko Hevery
fonte

Talvez uma pergunta noob, mas como estender isso para permitir um get () que retornou várias respostas, não apenas uma única resposta?

— Nate Bunney

@ NathanBunney, você pode fazer com que seu método estático acima faça um loop através dos resultados e crie uma matriz de livros.

— precisa

@NathanBunney 'Book.getAll = function () {return $ http.get (' / Book '). Then (function (response) {var books = []; for (var i = 0; i <response.data.length ; i ++) {books.push (novo livro (response.data [i]));} retornar livros;}); }; '

— Yair Nevet

Como você compartilharia uma bookou coleção de books entre controladores?

— Lukas

Isso é ótimo (obviamente desde que Misko criou a estrutura), mas estou lutando para descobrir como torná-la reutilizável. Se eu quisesse implementar as funções CRUD apenas uma vez e depois herdar sua funcionalidade em fábricas / serviços filhos que precisavam apenas de um argumento urlBase (de preferência armazenado no protótipo para que cada instância não precisasse de uma nova cópia do urlBase), como seria Eu faço isso?

— Dean Stamler

Eu recomendo que você use $ resource .

Pode suportar (substituição de URL) na próxima versão do Angularjs. Então você poderá codificar assim:

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

E retornos de chamada de retorno podem ser manipulados no escopo ctrl como este.

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

Provavelmente, você pode manipular código em um nível de abstração mais alto.

— obrigado
fonte

A versão atual do angular.js suporta a substituição de URL no módulo $ resource.

— thanksnote

Haha você está recomendando o criador real do quadro sobre como fazer algo: P

— HeberLZ

AMD! Eu me sinto tão envergonhado.

— thanksnote