jQuery to AngularJS Paradigm Switch

It’s March 2015 and the AngularJS is hotter than ever. According to our statistics alone 60% of developers are adopting the Google brain child. Hiring rate in AngularJS has gone up to 42% in 2015, compared with 13% in 2012.  Now before you start your relationship with this beautiful client-side framework, you want to understand its peculiarities to see if you’d want to spend hours on end playing with it. Let’s say that you’re an active jQuery developer and you’d like to switch to AngularJS – you’re wondering what it’d be like.

Well, the first thing you have to have in mind is that AngularJS and jQuery are pretty much like apples and oranges. They do different things and adopt different ideologies. Technically speaking, jQuery is a library and AngularJS is a framework. In the community, there isn’t even a common word to describe them together- library, platform, framework? There is definitely a common ground here; it’s just not on the surface. Let’s dive deeper into this.

AngularJS provides you with a set of features to produce a web applications, while jQuery mainly gives the ease of DOM manipulation and AJAX. With jQuery you instruct the DOM about what needs to happen step by step. With AngularJS you describe what end result you’d like to see but not how to do it. And here comes first piece of advice : In AngularJS you have to start from the ground up with your architecture in mind. Start with your objective, then move to designing your application flow, followed by data design and then finalize by designing your view for presentation. Your kind of need to plan out the whole project, you can’t just add AngularJS on top. Basically, don’t augment jQuery with AngularJS. If you observe keenly, we planned out to create Data Objects (Models), Behavior and Flow of Application (Controller) and Presentation (View) – making us think in terms of MVC – that’s what AngularJS is mainly about.

(Note: You could rewrite/inject a jQuery plugin in AngularJS but don’t make it your primary solution or you’ll never master AngularJS.)

Ok, so now you know that you need to operate like a server-side developer in addition to thinking like a client-side developer. Now you have to think about how to divide your application into individual, testable components.

Angular allows you to separate/isolate the DOM manipulation in the directives(directives can be considered extensions of HTML – in case HTML doesn’t do something you need.

These directives tell the AngularJS HTML compiler how to behave and what to do (attaching event listeners and interactions). And that is a key differentiator of the framework. If you want, you can create your own custom directives that will contain all your view logic or DOM manipulation. In contrast, jQuery says very little about how you should organize your code. It is you who have to tell the DOM what to do. Let’s break it down:

In jQuery, we programmatically change the view by responding to events and then updating them. AngularJS, on the other hand, will automatically update (synchronize) your view so you don’t have to. The view here is the “official record” of view-based functionality. So outside of a directive (applied in the view) you never need change the DOM.

Let’s repeat again:
Only do DOM manipulation in a directive.

However, in AngularJS there is a separate model layer that is independent from the view that we can manage how we want. Your model represents(or holds) your data and is tied to a view via scopes. Views therefore are a projection of the model. You can create HTML templates for each view, using the directives.

EXAMPLE
Angular.module(“mySampleApp”,[])
.directive(“paymentform”,function(){
return{
restrict: “E”,
templateUrl: “partials/paymentForm.tmpl.html”
}
});

AngularJS also uses directives and controllers (your controller’s function is to initialize $scope) to remove certain behaviors from HTML.

EXAMPLE (CONTROLLERS)

Angular.module(“mySampleApp”,[])
.controller(“paymentCtrl”,function($scope, payFactoryModel){
$scope.title = “Payment Methods”;
payFactoryModel.initiatePayment();
}

When looking for a comprehensive all-in-one solution, many tech enthusiasts realized that AngularJS is the right choice between the two. Its two-way data binding, in-built directives and filters has allowed developers to build applications very rapidly and has made them think about Angular.js as a viable replacement to jQuery.