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