Dot Net Stuff

Exploring AngularJS vs KnockoutJS


One of the basic question in developers mind that what is the difference between AngularJS and KnockoutJS, Which is better, and what is use. That is the subject of our article. For beginners if you are not familiar with AngularJS or KnockoutJS, I suggest you to go through Introduction of AngularJS and Introduction of KnockoutJS to get basic idea about these two frameworks. If you have confusion about KnockoutJS and jQuery read this article on KnockoutJS and Difference with jQuery. While Angular and Knockout are very different, they’re both excellent tools for building Single Page Applications, and the solutions ended up being quite similar.

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly. It works with plain old JavaScript objects, so you don’t need to clutter your code with ‘observables’ (paraphrased), but it doesn’t take long to realise that AngularJS and KnockoutJS aren’t very similar at all. Knockout is a tool for binding your model to the view, and automatically updating the view when things change. Angular does this too, but it also does much more. In fact Angular is more like a framework for building a Single Page Application (SPA). It implements hashtag routing for different page views, and an MVC pattern for wiring up controllers and models. It also has its own modules and dependency injection to help you build an application at enterprise scale. Let’s try to understand with comparing features of AngularJS and KnockoutJS.

Templating in AngularJS & KnockoutJS

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

Unobtrusive in AngularJS & KnockoutJS

KnockoutJS helper functions "ko.dataFor(element) and ko.contextFor(element)" can be used in event handlers that are attached unobtrusively using something like jQuery’s bind or click. AngularJS doesn’t support Unobtrusive.

Context in AngularJS & KnockoutJS

In KnockoutJS, if we want to fatch data from a context that is in the parent of our current context, we need to access it using ‘$parent’. While In AngularJS, context’s inherit prototypically. So, to access something from the parent context, we don’t usually have to use $parent. We only need to use $parent if we have another variable with the same name defined in your current context as well.

Directives or Custom Bindings in AngularJS & KnockoutJS

AngularJS has directives. We can define custom elements, custom attributes, comments and classes. In KnockoutJS, Custom elements are a syntactical alternative to the component binding (and in fact, custom elements make use of a component binding behind the scenes). For example, you can create interactive components like grids, tabsets, and so on, in the form of custom bindings.

JQuery Dependency of AngularJS & KnockoutJS

AngularJS has its own version of JQuery called JQueryLite ( smaller jquery). If we include JQuery before AngularJS, it will use the JQuery that we loaded. While, KnockoutJS does not depend on JQuery or create its own version of it. But, having said that, KnockoutJS 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.

Partitioning or creating new contexts AngularJS & KnockoutJS

AngularJS has a concept of controllers which allow you to create new contexts explicitly. AngularJS also implicitly creates context’s when using ng-repeat, ng-switch, ng-include etc. AngularJS’s controllers, services and its concept of DI make it extremely easy to partition and manage large applications. While KnockoutJS doesn’t allow you to create contexts explicitly (Unless you create custom bindings). KnockoutJS implicitly creates new contexts when using for-each etc.. It also shows that KnockoutJS has no opinion regarding the overall structure of your application.

Browser support for AngularJS & KnockoutJS

Both AngularJS and KnockoutJs are cross browser. AngularJS supports all new browsers and its support goes back till IE8. But, KnockoutJS supports till IE6.

Summary: If you don’t like having KnockoutJS’s observables all over your JavaScript code, then you’ll probably lean towards AngularJS. The MVC pattern used by AngularJS, and the dependency injection system, and the ability to easily create mocked dependencies in tests. There are pros and cons to both frameworks. It’s up to your requirement and priorities to select from KnockoutJS and AngularJS. I hope you will like this article.

Keen to hear from you...!

If you have any questions related to what's mentioned in the article or need help with any issue, ask it, I would love to here from you. Please MakeUseOf Contact and i will be more than happy to help.

About the author

Anil Sharma is Chief Editor of dotnet-stuff.com. He's a software professional and loves to work with Microsoft .Net. He's usually writes articles about .Net related technologies and here to shares his experiences, personal notes, Tutorials, Examples, Problems & Solutions, Code Snippets, Reference Manual and Resources with C#, Asp.Net, Linq , Ajax, MVC, Entity Framework, WCF, SQL Server, jQuery, Visual Studio and much more...!!!

blog comments powered by Disqus