Is AngularJS yet another library or it thoroughly has the capability to change the way we develop applications? What’s the difference between AngularJS and other libraries like the mature world wide known jQuery and its plethora of plugins, or Kendo UI /ExtJS? What brings it more in terms of data binding than KnockoutJS? This are the questions I will try to answer in order to decide if I would like to add AngularJS library to my skillset.
Recently I started digging into what I believe to be the future of client-side web design as responsive interface: AngularJS, Javascript library supported and developed by Google. During the initial research, seems that there are quite a few characteristics that sets it apart from other frameworks:
[fdropcap bg=”#333333″ color=”#ffffff”]F[/fdropcap]irst and foremost, it is supported by Google. I have great respect for the company and its products. Not to mention that they ship with extremely care and virtually no bugs, meaning that my task in fixing errors and unexpected behaviors would be easier.
[fdropcap bg=”#333333″ color=”#ffffff”]S[/fdropcap]econdly, provides a feature, called AngularJS Directives, which help you extend the HTML vocabulary, creating entities that can be later-on intercepted by javascript and act upon. For example, one can create his on “customform” tag and replace it during runtime with an actual customized form to be displayed to the user, helping the composition of the view pretty much like ASP .Net partials. The views are HTML, so no more complicated Javascript structures, sometimes including conditional visibility, describing the page like in ExtJS case. This enables clean development and easier support, so no more special templating language to learn! In Kendo UI’s grid, because of its intended flexibility, can be sometimes tricky and prone to errors to write a conditional and complex template at global grid level; not to mention that you can create also one for row, for footer etc.
[fdropcap bg=”#333333″ color=”#ffffff”]T[/fdropcap]he data-binding is natural: any controller and its properties are by default observable and the binding to HTML is by default two-way. Why would this be important? For example in KnockoutJS library one must always be sure that EACH subsequent property or method is created as observable, otherwise it won’t play nice and your beautifully designed HTML5/CSS3 view won’t show what you intend to. Or in Kendo UI, where you need only to specify the initial object as being observable, there are cases in which the “observable” wrapping is lost (during conversion to and from a JSON object). But with AngularJS, all objects are bindable, no mater if they are JSON-cloned.
[fdropcap bg=”#333333″ color=”#ffffff”]H[/fdropcap]uge DRY feeling – no more need for all the duplicated jQuery’s DOM queries in the case of updating rows in a grid – in which you find the element by class, get the desired attribute or property, compare it with the new value and replace it if necessary -in AngularJS’s case you declare the scope (in case of small apps is equal with the controller), bind desired property in HTML and run it! If the model gets updated, the binding automatically gets updated and new data is shown without you worrying about it! And the beauty of it is that with the same amount of code (hahaha) you get also the model updated from the HTML view if the property is bounded to a textbox’s value.
[fdropcap bg=”#333333″ color=”#ffffff”]B[/fdropcap]ecause the separation in Model View Controller, the controller can be easily tested in a controlled environment to find out if it works as intended. This also promotes the definition of a single concern in code, meaning that you’ll test just one feature and not a set of tight-coupled behaviors.
