I have limited experience with javascript and MVMM's and cannot answer all the questions, but here is what I do know:
Which is best overall?
Not enough experience with ember.js to comment.
Common gotchas for angular:
It's a very different approach when compared to using jquery for everything. The documentation can seem a bit daunting at first, as described in the popular post about why discourse chose ember.js.
"The documentation was simple to understand
Here’s some text right out of the Angular.JS guides, about a feature called Transclusion.
'The advantage of transclusion is that the linking function receives a transclusion function which is pre-bound to the correct scope. In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope. This makes it possible for the widget to have private state, and the transclusion to be bound to the parent (pre-isolate) scope.'" - http://eviltrout.com/2013/02/10/why-discourse-uses-emberjs.h...
A lot of these problems are solved by the excellent tutorial videos at http://www.egghead.io though. I have no affiliation to the site, but it has made a ton of things about angular more clear for me.
Ha ha, nice way to scare people off angular and justify their decision ;) Transclusions are an interesting feature to cherry pick because a) they're a necessary complexity to enable reusable components (one of angular's greatest strengths), and b) they highlight the steep learning curve required to truly master angular.
I agree that the docs can be a bit vague occasionally, but I think that's only due to the sheer depth of features and flexibility that angular provides. I was a skeptic for a long time (was championing knockout.js), but having used it in both personal and professional projects, I'm a convert.
Angular is a thoroughly well designed library, that gets the hell out of your way.
I wasn't trying to scare people off of angular, as it's what I am currently trying to use. I find it to be a very good framework, but also plan on checking out ember.js to see if it provides more for me overall or not.
1) a good friend recommended angular to me, in pre-1.0 days, the site was horrid, and I just couldn't grok angular. The framework, site and docs have improved drastically over the last year.
2) I was initially against angular's declarative markup style, thou shalt not mix html and code, etc. But after spending a bit of time getting unobtrusive bindings to work with KO [1], and then looking at the angular equivalent functionality [2], I was sold.
3) Having to massage "business-logic" code into ko.observable* (or DS.*) is quite arduous, angular does 2-way binding on plain old JS objects.
4) Angular templates are logic-less and it strongly encourages you to put your logic into your controllers, where it can be easily tested.
In the end KO is a template-binding library, whereas angular and ember are full stack.
John Lindquist's videos are a godsend when it comes to learning Angular. His videos finally convinced me to switch to doing all of my web development in IDEA (since I had a license anyways) with the AngularJS plugin.
I found out about his videos through the other ones he put on JetBrains TV[0]. If you're looking for an absolute crash course in AngularJS, the ones on JetBrains TV are the best.
"To solve the issue of lack of isolation, the directive declares a new isolated scope. An isolated scope does not prototypically inherit from the child scope, and therefore we don't have to worry about accidentally clobbering any properties.
However isolated scope creates a new problem: if a transcluded DOM is a child of the widget isolated scope then it will not be able to bind to anything. For this reason the transcluded scope is a child of the original scope, before the widget created an isolated scope for its local variables. This makes the transcluded and widget isolated scope siblings."
Data-binding and re-usability should not be that hard.
No. Please read this entire document on directives, which are a front-and-center feature of Angular: http://docs.angularjs.org/guide/directive. The transclusion snippet is pretty representative of this entire document.
Which is best overall? Not enough experience with ember.js to comment.
Common gotchas for angular: It's a very different approach when compared to using jquery for everything. The documentation can seem a bit daunting at first, as described in the popular post about why discourse chose ember.js.
"The documentation was simple to understand
Here’s some text right out of the Angular.JS guides, about a feature called Transclusion.
'The advantage of transclusion is that the linking function receives a transclusion function which is pre-bound to the correct scope. In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope. This makes it possible for the widget to have private state, and the transclusion to be bound to the parent (pre-isolate) scope.'" - http://eviltrout.com/2013/02/10/why-discourse-uses-emberjs.h...
A lot of these problems are solved by the excellent tutorial videos at http://www.egghead.io though. I have no affiliation to the site, but it has made a ton of things about angular more clear for me.
Hope this helps!