Recursos de pré-carga em angular com retangular

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-resourcediretiva 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();