AngularJS client side data binding and server side templating

AngularJS uses two-way client side data binding (from AngularJS Developers guide): Two-Way Data Binding

Has anyone consider using mix of server side templating engine with AngularJS two-way client side data binding. Something like this: Mixed data binding

I am thinking about using AngularJS just for parts(components) of the page? Would it be good idea?

I would like to hear if you already had experiences with similar approach and what were drawbacks and advantages...

Angular is a complete UI rendering client framework. You can feed data into it, and it will render the proper html. On it's own Angular is a templating solution completely de-coupled from any server.

What you're attempting to do, is re-couple your Angular application to your server. It will be more work, there will be very few benefits, and you'll lose your ability to switch server technologies but keep your angular application untouched.

In essence, you don't want to do this for the same reason you wouldn't want to have your server rendering JavaScript for you... it's just less obvious because of all of the years we've been rendering all of our HTML at the server.

The end result is what's important. That the UI works properly and the application is easy to maintain. If you find your solution to be easier to maintain, then you should do it. I have a hard time imagining much being easier to maintain than straight HTML and JavaScript with a server that does nothing but host JSON.

I had the same dilemma as you have, I come from a background of using SMARTY as a server side template engine and we recently started using AngularJS.

I think mixing both solution would be appropriate in the the essence of total separation. i.e don't mix part of your page with both technologies but use both technologies separately.

For instance if you have a listing page where users will not interact with it at all, you may use server side template perfectly.

But if a page involve lots of manipulation and user side interaction in this case Angular is what you should use.

If you are using SPA (single page application) don't use server side template at all.

This answer is somewhat of a tangent, but I believe it to be relevant.

I worked on a site where I wanted to have server-templating for SEO purposes and client-side refreshing for a snappy user experience. This was mainly a search/read-only site, so it was kind of a special case. But what I ended up doing is doing all the rendering on the server...

To refresh the client, I did the following:

  1. Used the history.js plugin to update the current URL.
  2. Used jQuery to make a GET request to the server with the current browser URL.
  3. Used the jQuery.parseHtml() function to convert the returned HTML into a jQuery object.
  4. Selectively replaced parts of the current page with what was returned from the server. This is important since dynamic elements like a Google Map needed be updated using an API.

The user was able to refresh their browser or share a link and see the same screen that was being displayed as they navigated through the search.

As a bonus, setting a small cache timeout of 5 minutes (browser and server) sped things up dramatically as the most popular searches were hot-n-ready for delivery.

In a cordova app we recently made, we used a kind of a mix. Fix content like forms, lists, headers and menues we did in the angular way, some parts like content from an RTE or often changing templates we added with the directive ngBindHtml. The idea behind is to be flexible in the content pages of the app if the client want to change layout or want to put currently unknown content to it. But i would suggest: if you can easy maintain the app (no long deployment/approval process) you should do it the angular way (but with no SEO in mind;).