Currently, I am working on a medium-sized Rails application and my latest endeavor is to integrate Angular into the system. After reviewing several tutorials, it appears that the most common method for fetching initial data and displaying the first view involves issuing a get request in the controller's constructor/initialization.
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}
});
}]);
The process involves the browser making an initial request to load JavaScript/Angular which triggers a second request to retrieve the data needed to render the page.
Initially, my thought was to generate the initial page view server-side. However, after some research, it seems that this approach is not commonly used or recommended since it would require duplicating templating and logic on both client and server sides.
Another idea I had is to render or store the initial data on the Rails side using JSON/javascript and have Angular fetch the data from there instead of executing an AJAX request initially. Subsequent requests could still utilize AJAX, but this strategy would eliminate the round trip request at the outset. Has anyone experimented with this method, and are there any potential drawbacks I should consider?