HTML template filled in server-side and updated client-side

Question

I have a webpage with dynamic content. Let\'s say it\'s a product page. When the user goes directly to example.com/product/123 I want to render my product templ

Answer 1

I don't know of a nice techiqunue for doing this, but this is something I've settled on for the time being in a rails application I'm building.

You start by initialising your template with seed data using ng-init.

    

      {{feature.title}}
      
{{feature.description}}
    

Then you render the seed data twice. Once from the server and again once Angular has bootstrapped your application. When the application is bootstrapped, Angular will hide the initial seed data leaving only the angularized template.

It's important that you use ng-cloak to hide the angular template before it's bootstrapped.

  <% features.each do |feature| %>
    

      <%= feature.title %>
      
<%= feature.description =>
    
  <% end %>


    

      {{feature.title}}
      
{{feature.description}}
    

It doesn't scale with large templates, you're duplicating markup, but at least you won't get that flickering while Angular is bootstrapping your app.

Ideally I'd like to be able to re-use the same template on the server as on the client. Something like mustache comes to mind. Obviously the trick would be implementing angular's directives and flow control. Not an easy job.