27

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...

PrimosK
  • 13,848
  • 10
  • 60
  • 78
  • I was using AngularJS inside Jade templates, which worked fine. Just make sure both template engines don't share some parts of syntax because you'll end up in escaping hell. I went with Knockout in the end, but both work well with Jade, because Jade doesn't use curly braces (if it would -> escaping hell). – Prinzhorn Oct 27 '12 at 18:45
  • Good point! From AngularJS version 1.0, you [can change](http://stackoverflow.com/questions/12923521/angular-js-custom-delimiter) interpolation markup easily. This might help in such situation. – PrimosK Oct 27 '12 at 18:57
  • I didn't dive into AngularJS that much, but that's good to know. Knockout on the other doesn't have anything like that, just attributes (unless you use an external template engine). – Prinzhorn Oct 27 '12 at 19:02
  • If you browse the AngularJS website you will find several AngularJS apps running on one page: http://angularjs.org/. Depending on what you need exactly, I think it should work just fine! – F Lekschas Oct 27 '12 at 19:52
  • this question would be better off at programmers.stackexchange.com, it's not really the format for this site. – Ben Lesh Oct 28 '12 at 20:06
  • Do you have any ideas to do that using razor in asp.net mvc and ng-repeat for example ? For simple binding I use @Model.variable so I initialize first load with ViewModel data and angular is able to do change. But How to do that with a ng-repeat using ng-include for example ? On my way it is not possible :/ – Vincenzo Sep 26 '13 at 19:32

3 Answers3

10

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.

Ben Lesh
  • 107,825
  • 47
  • 247
  • 232
  • 12
    I think there's at least one benefit: you can render the page with initial data, useful for SEO. I've also wondering about that, but in fact, it seems there's no client-side template engine that supports this scenario. – tanathos Dec 28 '12 at 03:03
  • 2
    It might be useful for SEO ... for now. But search engines are constantly evolving trying to get the best results to users. Your best bet in the long-run is to develop a site that delivers the content to the user in the best way possible, and let Google/Yahoo/Bing take care of their end. – Ben Lesh Dec 28 '12 at 14:51
  • 10
    In professional sites (such as e-commerce) there is often the requirement that the site has to work without javascript (even though the user-base nowadays does not have javascript disabled). So it's a necessary evil to preload the page with data. Another is slow page load that makes the site flicker from showing the template to compiled. So those are other reasons than SEO for why serverside preloading needs to be in place AFAIK. – Spoike Feb 22 '13 at 13:59
  • @Spoike: If it's a requirement that the site work without JavaScript, Angular is likely out the window anyhow. The only hope you'd have would be to use Node.JS and modify the Angular libraries to render the HTML at the server in cases where JavaScript wasn't working. But that would be the most awful hack of all time. Probably better off just using some server technology at that point. – Ben Lesh Feb 22 '13 at 19:50
  • 1
    I agree with @Spoike and tanathos. I don't like to get the index.html page and then make a request to get preload data. Is there a way to inject that data into Angular instead of making a new request? Usually, I use a server template engine, like Smarty, to render the first page and then a client template engine, like Angular, to change view through AJAX requests: however, I don't like this approach too because I'll get Smarty and Angular directives mixed together. I think that's the why that PrimosK made this post, right? – Wilk Mar 25 '13 at 18:47
  • Yeah, you can do it, it will just be awful to maintain. – Ben Lesh Mar 25 '13 at 19:07
  • I'm confused by this; if I have a block of repetitive tables, am I supposed to be creating directives that render out the data in the repetitive tables? My first instinct is to do this on the server side. –  Sep 26 '13 at 17:53
3

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.

Mohamed Adel El-Badry
  • 89
  • 6
0

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

fenta
  • 1
  • 1