So I'm working on a medium sized Rails app and I'm trying to learn and add in Angular to the app. I've looked at a few tutorials and it seems like the most common approach for getting the initial data and rendering the initial view is to issue a get request in the controller constructor/initialization as follows
phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone', function($scope, Phone) {
$scope.phones = Phone.query();
$scope.orderProp = 'age';
}]);
var phonecatServices = angular.module('phonecatServices', ['ngResource']);
phonecatServices.factory('Phone', ['$resource',
function($resource){
return $resource('phones/:phoneId.json', {}, {
query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
});
}]);
So the way this works is the browser makes initial request and loads javascript/angular which then makes a second request to get the data and once it receives the data it renders the page.
My initial idea would be to render the initial page view server side but after googling it doesn't seem like this is a popular or good way to do it (would have to duplicate lots of templating/logic on client and server?)
My second idea is to render/store the initial data on the rails side in json/javascript and have angular get the initial data from there instead of making an ajax request for the data. After this initialization, then subsequent requests could make ajax requests but this would avoid the round trip request in the very beginning. Has anyone else tried this and are there any problems with this approach i should be aware of?
