Angular vs Knockout

1. Angular vs Knockout

2. Pros and consTemplating(Angular and Knockout both provide DOM based templating.) Angular Knockout Knockout by default uses HTML as its templating mechanism ( which is where they both have DOM based templating ) , but Knockout also supports other string based templating engines like Handlebars etc • Angular only supports HTML as its templating mechanism.

3. Unobtrusive Angular Knockout Knockout tries to please people who are interested in Unobtrusive Stuff.. • Angular doesnt believe in it 

4. Context  Angular Knockout In knockout, in order to fetch data from a context that is in the parent of your current context, you need to access it using `$parent`. • In angular, context’s inherit prototypically. So, to access something from the parent context, you dont usually have to use $parent . You only need to use $parent if you have another variable with the same name defined in your current context as well.

5. Directives or Custom Bindings  Angular Knockout Knockout doesnt allows you to create custom elements. You have to create all your bindings inside data-bind Knockout has “custom bindings” which is, from what I understood, similar to Angular’s directives • Angular has directives. You can define custom elements, custom attributes, comments and classes.

6. JQuery Dependency Angular Knockout Knockout does not depend on JQuery or create its own version of it. But, having said that, Knockout is a data-binding library. It does not have any opinions or implementations for doing Ajax or DOM querying. If you don’t include JQuery, you are free to do ajax and DOM manipulation either directly or with some other library. • Angular has its own version of JQuery called JQueryLite ( smaller jquery). If you include JQuery before Angular, it will use the JQuery you loaded.

7. Browser support  Angular Knockout Knockout supports till IE6. • Angular supports all new browsers and its support goes back till IE8.

8. IDE support and debuggingsupport Angular Knockout Knockout doesnt have any popular IDE plugins which help in developer productivity.. I believe it is mostly because it used a single data-* attribute as opposed to Angular which uses different data-* attributes for different tasks.  In terms of plugins, Knockout too has a Google Chrome extension, but I am not sure it works as seamlessly as the Angular Batarang. • Angular has amazing plugins available for all Intellij IDE’s. There is also a plugin available for Visual studio, which I believe is a port of the Intellij plugin. Angular also has a Google Chrome extension called Angular Batarang which allows you to select any element in the developer tools window and preview its scope variables.

9. Variable Observation(Angular) Html • <div ng-bind="myContent"></div> or • <div>{{myContent}}</div> Javascript • $scope.myContent="Hello World";

10. Variable Observation(Knockout) html • <div data-bind="text : myContent"></div> javascript • varmyContent = ko.observable("Hello World");

11. To change that Angular • $scope.myContent="Hello You"; Knockout • myContent("Hello You")

12. References • http://blog.nebithi.com/ • http://egghead.io/ • http://todomvc.com/ • http://angularjs.org/ • http://knockoutjs.com/