Ao escrever código front-end com uso intensivo de dados, gosto de reduzir o máximo possível de solicitações de servidor. Uma maneira de fazer isso é gravar os dados iniciais do aplicativo na própria origem da página. O Angular pode então carregar automaticamente esses dados na inicialização. Existem algumas maneiras de fazer isso, mas gosto de usar uma diretiva.
index.erb.html
<div ng-cloak preload-resource="<%= @items.to_json %>"></div>
preload-resource.js
angular.module('app')
.directive('preloadResource', function preloadResourceDirective(Restangular) {
return {
link: function(scope,element,attrs) {
scope.items = JSON.parse(attrs.preloadResource);
element.remove();
}
};
});
Quando o Angular encontra a preload-resource
diretiva no DOM, ele executa a função de link. Estou analisando o JSON e, em seguida, atribuindo essa coleta a $scope.items
. Finalmente, o elemento é removido do DOM.
Retangular
Restangular é uma ótima biblioteca Angular para lidar com APIs REST. Restangular estende objetos com uma série de recursos para trabalhar com um back-end REST. Para meus propósitos, só preciso converter minha lista de registros do back-end ( @items.to_json
) em objetos habilitados para Restangular.
preload-resource.js
angular.module('app')
.directive('preloadResource', function preloadResourceDirective(Restangular) {
return {
link: function(scope,element,attrs) {
scope.items = JSON.parse(attrs.preloadResource);
Restangular.restangularizeCollection(null, scope.items, 'items');
element.remove();
}
};
});
E agora posso atualizar qualquer um dos meus itens assim
var item = _.find($scope.items, {id: itemId});
item.done = true;
item.save();